// Home page — hero, services, stats, projects, CTA.

const Home = ({ onNav }) => {
  const projects = [
    { name: "Markovo Tepe Mall", loc: "Plovdiv, Bulgaria", img: "assets/photos/references/markovo-tepe-mall-plovdiv.jpg", alt: "Markovo Tepe Mall construction, Plovdiv, Bulgaria — Hunter Invest" },
    { name: "Yavuz Sultan Selim Bridge", loc: "İstanbul, Türkiye", img: "assets/photos/references/bosphorus-bridge-istanbul.jpg", alt: "Third Bosphorus Bridge İstanbul construction project — Hunter Invest" },
    { name: "Hyundai-Rotem Railroad Plant", loc: "Türkiye", img: "assets/photos/references/hyundai-rotem-railroad-turkey.jpg", alt: "Hyundai-Rotem railroad vehicles plant steel construction, Türkiye — Hunter Invest" },
  ];
  const services = [
    { n: "01", name: "Manpower", body: "Engineers, HSE managers, supervisors, technicians and skilled labour deployed across the EU." },
    { n: "02", name: "Equipment Rental", body: "Tower cranes, scaffolding, compactors, cutters, vibrators. Full mixed fleet from Bulgaria." },
    { n: "03", name: "Steel Frame Construction", body: "Owned plant since 1990. 500,000+ m² of light-gauge steel and 1,000,000+ m² of drywalls completed." },
    { n: "04", name: "Construction Management", body: "Cost, contracts, HSE, QA/QC. Engineering consultancy that delivers measurable savings." },
  ];
  return (
    <>
      {/* HERO */}
      <section className="hero-section section-pad" style={{
        position: "relative",
        minHeight: 640,
        background: `linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.85) 100%), url('assets/photos/lgs-housing-2.jpg') center/cover`,
        color: "var(--bone)",
        display: "flex", alignItems: "flex-end",
        padding: "120px 56px 80px",
      }}>
        <div style={{ maxWidth: 900, position: "relative", zIndex: 1 }}>
          <Overline>HUNTER INVEST · LTD · SINCE 1960s</Overline>
          <h1 style={{
            font: "700 96px/0.95 var(--font-display)",
            textTransform: "uppercase", letterSpacing: "-.005em",
            margin: "20px 0 24px",
          }}>Built.<br/>Delivered.</h1>
          <p style={{
            font: "400 19px/1.55 var(--font-body)",
            color: "rgba(244,242,238,.85)", maxWidth: 620, marginBottom: 32,
          }}>
            Sixty years of construction expertise across Europe and the Middle East. Manpower, equipment, structural steel, project management — under one roof, in Sofia.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="cta" onClick={() => onNav("Projects")}>SEE OUR WORK</Button>
            <Button variant="onDark" onClick={() => onNav("Contact")}>Request a quote</Button>
          </div>
        </div>
        <img className="hero-claw" src="assets/claw-red.png" alt="" style={{
          position: "absolute", right: -80, top: 40, height: 540,
          opacity: .35, pointerEvents: "none",
        }}/>
      </section>

      {/* SERVICES */}
      <section className="section-pad" style={{ background: "var(--bone)", padding: "96px 56px" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <Overline>WHAT WE DO</Overline>
          <h2 style={{ font: "700 56px/1 var(--font-display)", textTransform: "uppercase", margin: "16px 0 48px", maxWidth: 720 }}>
            Manpower, equipment, steel, management.
          </h2>
          <div className="services-grid">
            {services.map(s => (
              <div key={s.n} onClick={() => onNav("Services")} style={{
                background: "var(--paper)",
                borderTop: "3px solid var(--hunter-red)",
                padding: "28px 32px",
                borderRadius: 8,
                boxShadow: "var(--shadow-1)",
                cursor: "pointer",
                transition: "box-shadow .15s, transform .15s",
              }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = "var(--shadow-2)"; e.currentTarget.style.transform = "translateY(-2px)"; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = "var(--shadow-1)"; e.currentTarget.style.transform = ""; }}
              >
                <Overline>{s.n} / SERVICES</Overline>
                <h3 style={{ font: "700 28px/1.1 var(--font-display)", textTransform: "uppercase", margin: "12px 0 12px" }}>{s.name}</h3>
                <p style={{ font: "400 15px/1.6 var(--font-body)", color: "var(--steel)", margin: 0 }}>{s.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROJECTS */}
      <section className="section-pad" style={{ background: "var(--ink)", color: "var(--bone)", padding: "96px 56px" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <div className="projects-header">
            <div>
              <Overline color="var(--claw-red)">RECENT WORK</Overline>
              <h2 style={{ font: "700 56px/1 var(--font-display)", textTransform: "uppercase", margin: "16px 0 0" }}>Selected projects.</h2>
            </div>
            <Button variant="onDark" onClick={() => onNav("Projects")}>All references →</Button>
          </div>
          <div className="projects-grid-3">
            {projects.map(p => (
              <div key={p.name} style={{ background: "var(--ink-2)", borderRadius: 8, overflow: "hidden" }}>
                <ProjectImage src={p.img} alt={p.alt} />
                <div style={{ padding: "20px 22px" }}>
                  <Overline color="var(--steel-3)">{p.loc}</Overline>
                  <h4 style={{ font: "600 18px/1.2 var(--font-body)", margin: "8px 0 0" }}>{p.name}</h4>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section-pad" style={{ background: "var(--hunter-red-deep)", color: "var(--bone)", padding: "80px 56px" }}>
        <div className="cta-row" style={{ maxWidth: 1280, margin: "0 auto" }}>
          <h2 style={{ font: "700 48px/1 var(--font-display)", textTransform: "uppercase", margin: 0, maxWidth: 720 }}>
            Have a project in mind? Let's talk specifications.
          </h2>
          <Button variant="cta" style={{ background: "var(--bone)", color: "var(--ink)", flexShrink: 0 }} onClick={() => onNav("Contact")}>REQUEST A QUOTE</Button>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { Home });