// Inner pages — Services, Equipment, Projects, About, Contact.

const PageHeader = ({ kicker, title, subtitle, bg }) => (
  <section className="section-pad page-header" style={{
    background: bg ? `linear-gradient(180deg, rgba(10,10,12,.55), rgba(10,10,12,.8)), url('${bg}') center/cover` : "var(--ink)",
    color: "var(--bone)",
    padding: "100px 56px 72px",
    borderBottom: "1px solid var(--border-on-dark)",
  }}>
    <div style={{ maxWidth: 1280, margin: "0 auto" }}>
      <Overline>{kicker}</Overline>
      <h1 style={{ font: "700 72px/0.98 var(--font-display)", textTransform: "uppercase", margin: "16px 0 16px", maxWidth: 900 }}>{title}</h1>
      {subtitle && <p style={{ font: "400 18px/1.55 var(--font-body)", color: "rgba(244,242,238,.85)", maxWidth: 720, margin: 0 }}>{subtitle}</p>}
    </div>
  </section>
);

const Services = () => {
  const items = [
    { n: "01", t: "Property Development", body: "Industrial real estate (warehouses, cold storage, manufacturing buildings) and residential development. Consultation from best-use study through construction permit and financial modeling to delivery." },
    { n: "02", t: "Construction Management & Engineering Consultancy", body: "Cost management, contract administration, HSE, and QA/QC. A core area of expertise that has enabled clients to realise significant cost savings on projects across the EU and Middle East." },
    { n: "03", t: "Steel Frame Construction", body: "Owned and operated structural-steel manufacturing plant since the early 1990s. Vertical integration from production to erection." },
    { n: "04", t: "Manpower", body: "We supply specialised manpower including engineers, HSE managers, project managers, technicians, supervisors and renovation specialists across the EU. Our meticulous approach to selecting and deploying personnel ensures every project is executed with precision and professionalism." },
    { n: "05", t: "Equipment Rental", body: "Small tower cranes, hydraulic cylinders (1–5 tons), plate compactors, concrete vibrators, load-bearing scaffolding for formwork, vertical cutters, asphalt and concrete cutters. Mixed fleet operated out of Bulgaria. Full catalogue available on request." },
  ];
  return (
    <>
      <PageHeader kicker="WHAT WE DO" title="Services."
        subtitle="Five disciplines, one company. Built on sixty years of inherited expertise."
        bg="assets/photos/steel-frame-2.jpg" />
      <section className="section-pad" style={{ background: "var(--bone)", padding: "80px 56px" }}>
        <div style={{ maxWidth: 980, margin: "0 auto", display: "flex", flexDirection: "column", gap: 12 }}>
          {items.map(s => (
            <div key={s.n} style={{
              background: "var(--paper)",
              borderLeft: "4px solid var(--hunter-red)",
              padding: "32px 36px",
              borderRadius: 6, boxShadow: "var(--shadow-1)",
              display: "grid", gridTemplateColumns: "80px 1fr", gap: 20,
            }}>
              <div style={{ font: "700 38px/1 var(--font-display)", color: "var(--claw-red)" }}>{s.n}</div>
              <div>
                <h3 style={{ font: "700 26px/1.15 var(--font-display)", textTransform: "uppercase", margin: "0 0 10px" }}>{s.t}</h3>
                <p style={{ font: "400 15px/1.65 var(--font-body)", color: "var(--ink)", margin: 0 }}>{s.body}</p>
              </div>
            </div>
          ))}
        </div>
      </section>
    </>
  );
};

const Equipment = () => {
  const fleet = [
    ["Tower Cranes", "Lifting", "1–6 t lift · H=28-32m · Boom=30-38m", "3 mo / 6 mo/ 9 mo/ Yearly"],
    ["Hydraulic Cylinder", "Jacking", "1, 2, 3, 5 t", "Daily / Weekly"],
    ["Heavy-duty Plate Compactor", "Compaction", "Wacker DPU 6555 · diesel", "Daily / Weekly"],
    ["Concrete Vibrators", "Concrete", "Wacker · Electric", "Daily / Weekly"],
    ["Load-bearing Scaffolding", "Formwork", "Doka · System Scaffold", "Project"],
    ["Vertical Cutter", "Cutting", "Stihl TS910i · Up to 400 mm depth", "Daily"],
    ["Asphalt Cutter", "Cutting", "Petrol · 350 mm blade", "Daily"],
    ["Concrete Cutter", "Cutting", "Petrol · 400 mm blade", "Daily"],
  ];
  return (
    <>
      <PageHeader kicker="EQUIPMENT RENTAL" title="Mixed fleet, ready to deploy."
        subtitle="Small cranes, scaffolding, compactors, cutters, vibrators. Operated out of Bulgaria, available across the EU." />
      <section className="section-pad" style={{ background: "var(--bone)", padding: "60px 56px" }}>
        <div style={{ maxWidth: 1100, margin: "0 auto" }}>
          <div style={{ marginBottom: 24 }}>
            <Overline color="var(--steel)">FLEET CATALOGUE</Overline>
          </div>
          <div style={{ background: "var(--paper)", borderRadius: 8, boxShadow: "var(--shadow-1)", overflow: "hidden" }}>
            <div style={{ overflowX: "auto", WebkitOverflowScrolling: "touch" }}>
            <table style={{ width: "100%", borderCollapse: "collapse", minWidth: 540 }}>
              <thead>
                <tr style={{ background: "var(--ink)", color: "var(--bone)" }}>
                  {["Equipment", "Category", "Spec", "Rental"].map(h => (
                    <th key={h} style={{ textAlign: "left", padding: "14px 22px", font: "600 11px/1 var(--font-mono)", letterSpacing: ".14em", textTransform: "uppercase" }}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {fleet.map((row, i) => (
                  <tr key={i} style={{ borderTop: "1px solid var(--border-1)" }}>
                    <td style={{ padding: "14px 22px", font: "600 14px/1.2 var(--font-body)" }}>{row[0]}</td>
                    <td style={{ padding: "14px 22px", font: "500 13px/1.2 var(--font-body)", color: "var(--steel)" }}>{row[1]}</td>
                    <td style={{ padding: "14px 22px", font: "500 13px/1 var(--font-mono)", color: "var(--ink)" }}>{row[2]}</td>
                    <td style={{ padding: "14px 22px", font: "500 13px/1 var(--font-mono)", color: "var(--claw-red)" }}>{row[3]}</td>
                  </tr>
                ))}
              </tbody>
            </table>
            </div>
          </div>
          <p style={{ font: "400 13px/1.6 var(--font-body)", color: "var(--steel)", marginTop: 18 }}>
            Specifications and availability vary. Contact us for current rates and project-based pricing.
          </p>
        </div>
      </section>
    </>
  );
};

const Projects = () => {
  const refs = [
    { name: "Markovo Tepe Mall", loc: "Plovdiv, Bulgaria", scale: "Retail & commercial", 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", scale: "Infrastructure", img: "assets/photos/references/bosphorus-bridge-istanbul.jpg", alt: "Third Bosphorus Bridge İstanbul construction project — Hunter Invest" },
    { name: "Hyundai-Rotem Railroad Vehicles Plant", loc: "Türkiye", scale: "Production & administration", img: "assets/photos/references/hyundai-rotem-railroad-turkey.jpg", alt: "Hyundai-Rotem railroad vehicles manufacturing plant steel structure, Türkiye — Hunter Invest" },
    { name: "Honda Car Factory", loc: "Türkiye", scale: "Industrial structure", img: "assets/photos/references/honda-car-factory-turkey.jpg", alt: "Honda car factory industrial steel frame construction, Türkiye — Hunter Invest" },
    { name: "Sunman Logistics Center", loc: "Türkiye", scale: "35,000 m²", img: "assets/photos/references/sunman-logistics-center-turkey.jpg", alt: "Sunman logistics center 35,000 m² warehouse construction, Türkiye — Hunter Invest" },
    { name: "Borsa Ognyanovo Facility", loc: "Bulgaria", scale: "Agricultural & industrial", img: "assets/photos/references/borsa-ognyanovo-pazardjik.jpg", alt: "Borsa Ognyanovo grain storage facility construction, Pazardjik, Bulgaria — Hunter Invest" },
  ];
  const more = [
    "Cold Storage, Plovdiv (BG) — 4,400 m²",
    "Datex Building, Sofia (BG)",
    "Alcomet Rolling Mill, Schumen (BG)",
    "MD Electronic Building, Vratsa (BG)",
    "Opsan Auto Body Parts Plant (TR)",
    "Austrotherm Factory (TR)",
    "Doka Formwork Factory (TR)",
    "Burger King Office & Cold Storage (TR)",
    "Vestel Electronics Plant (RU)",
    "Supsa Oil Terminal (GE)",
    "Severnaya 400 MW Power Plant (AZ)",
  ];
  return (
    <>
      <PageHeader kicker="REFERENCES" title="Projects across four continents."
        subtitle="Industrial plants, logistics centres, housing, and infrastructure. A selection from our reference book." />
      <section className="section-pad" style={{ background: "var(--bone)", padding: "72px 56px" }}>
        <div style={{ maxWidth: 1280, margin: "0 auto" }}>
          <div className="projects-grid-3" style={{ marginBottom: 56 }}>
            {refs.map(p => (
              <div key={p.name} style={{ background: "var(--paper)", borderRadius: 8, overflow: "hidden", boxShadow: "var(--shadow-1)" }}>
                <ProjectImage src={p.img} alt={p.alt} />
                <div style={{ padding: "18px 22px" }}>
                  <Overline color="var(--steel)">{p.loc}</Overline>
                  <h4 style={{ font: "700 18px/1.2 var(--font-display)", textTransform: "uppercase", margin: "8px 0 4px" }}>{p.name}</h4>
                  <span style={{ font: "500 12px/1 var(--font-mono)", color: "var(--claw-red)" }}>{p.scale}</span>
                </div>
              </div>
            ))}
          </div>
          <Overline color="var(--steel)">OTHER REFERENCES</Overline>
          <div className="projects-grid-2" style={{ marginTop: 16, paddingTop: 8, borderTop: "1px solid var(--border-1)" }}>
            {more.map(m => (
              <div key={m} style={{
                font: "500 14px/1.4 var(--font-body)", color: "var(--ink)",
                padding: "10px 0", borderBottom: "1px solid var(--border-1)",
              }}>{m}</div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

const About = () => (
  <>
    <PageHeader kicker="ABOUT US" title={<>Sixty years.<br/>Three generations.<br/>One discipline.</>}
      subtitle="Hunter Invest LTD is a Bulgaria-based industrial construction company with deep expertise in manpower, structural steel, and project delivery." />
    <section className="section-pad" style={{ background: "var(--bone)", padding: "80px 56px" }}>
      <div style={{ maxWidth: 880, margin: "0 auto" }}>
        <div className="about-grid" style={{ marginBottom: 56 }}>
          <p style={{ font: "400 16px/1.7 var(--font-body)", color: "var(--ink)", margin: 0 }}>
            At Hunter Invest LTD, we offer a comprehensive range of services built on a legacy of over sixty years. With a foundation passed down through generations, we have honed our expertise in construction-related sectors, making us a trusted provider of manpower and equipment solutions.
          </p>
          <p style={{ font: "400 16px/1.7 var(--font-body)", color: "var(--ink)", margin: 0 }}>
            Throughout the years, tens of thousands of skilled professionals have been employed across our projects. Whether you require skilled labour, specialised technicians, or project managers, we have the resources to assemble the right team.
          </p>
        </div>
        <div style={{ background: "var(--paper)", padding: "32px 36px", borderLeft: "4px solid var(--hunter-red)", borderRadius: 6, marginBottom: 40 }}>
          <Overline>VERTICAL INTEGRATION</Overline>
          <h3 style={{ font: "700 28px/1.15 var(--font-display)", textTransform: "uppercase", margin: "12px 0 12px" }}>Steel, in-house since 1990.</h3>
          <p style={{ font: "400 15px/1.65 var(--font-body)", color: "var(--steel)", margin: 0 }}>
            We have established and operated a structural-steel manufacturing plant since the early 1990s. Controlling the entire process in-house — from production to erection — lets us maintain strict quality and deliver on time.
          </p>
        </div>
      </div>
    </section>
  </>
);

const Contact = () => {
  const FORMSPREE_ID = "xdabeqwg";
  const [form, setForm] = React.useState({ name: "", company: "", email: "", type: "Manpower supply", details: "" });
  const [status, setStatus] = React.useState("idle");
  const set = (e) => setForm({ ...form, [e.target.name]: e.target.value });
  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus("sending");
    try {
      const res = await fetch(`https://formspree.io/f/${FORMSPREE_ID}`, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify(form),
      });
      setStatus(res.ok ? "success" : "error");
    } catch { setStatus("error"); }
  };
  return (
  <>
    <PageHeader kicker="GET IN TOUCH" title="Talk specifications."
      subtitle="Tell us about your project. We'll respond within two business days." />
    <section className="section-pad" style={{ background: "var(--bone)", padding: "72px 56px" }}>
      <div className="contact-grid" style={{ maxWidth: 1080, margin: "0 auto" }}>
        {status === "success" ? (
          <div style={{ background: "var(--paper)", padding: 40, borderRadius: 8, boxShadow: "var(--shadow-1)", borderLeft: "4px solid var(--hunter-red)" }}>
            <h3 style={{ font: "700 28px/1.15 var(--font-display)", textTransform: "uppercase", margin: "0 0 12px" }}>Enquiry received.</h3>
            <p style={{ font: "400 15px/1.65 var(--font-body)", color: "var(--steel)", margin: 0 }}>Thank you — we'll be in touch within two business days.</p>
          </div>
        ) : (
        <form onSubmit={handleSubmit} style={{ background: "var(--paper)", padding: 32, borderRadius: 8, boxShadow: "var(--shadow-1)", display: "flex", flexDirection: "column", gap: 16 }}>
          {[["Name", "name", "text", "Your full name"], ["Company", "company", "text", "Company name"], ["Email", "email", "email", "you@company.com"]].map(([l, n, t, p]) => (
            <label key={n} style={{ display: "flex", flexDirection: "column", gap: 6 }}>
              <span style={{ font: "600 11px/1 var(--font-body)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--steel)" }}>{l}</span>
              <input required type={t} name={n} placeholder={p} value={form[n]} onChange={set} style={{
                font: "500 15px/1 var(--font-body)", padding: "12px 14px",
                background: "var(--bone)", border: "1px solid var(--border-2)", borderRadius: 6, color: "var(--ink)", outline: "none",
              }} />
            </label>
          ))}
          <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ font: "600 11px/1 var(--font-body)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--steel)" }}>Project type</span>
            <select name="type" value={form.type} onChange={set} style={{ font: "500 15px/1 var(--font-body)", padding: "12px 14px", background: "var(--bone)", border: "1px solid var(--border-2)", borderRadius: 6, color: "var(--ink)" }}>
              <option>Manpower supply</option><option>Equipment rental</option><option>Steel frame construction</option><option>Construction management</option><option>Property development</option>
            </select>
          </label>
          <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            <span style={{ font: "600 11px/1 var(--font-body)", letterSpacing: ".14em", textTransform: "uppercase", color: "var(--steel)" }}>Project details</span>
            <textarea required rows={5} name="details" placeholder="Scope, site, timeline, m² estimate…" value={form.details} onChange={set} style={{
              font: "400 15px/1.5 var(--font-body)", padding: "12px 14px",
              background: "var(--bone)", border: "1px solid var(--border-2)", borderRadius: 6, color: "var(--ink)", outline: "none", resize: "vertical",
            }}></textarea>
          </label>
          {status === "error" && <p style={{ font: "500 13px/1.4 var(--font-body)", color: "var(--claw-red)", margin: 0 }}>Something went wrong — please email us directly.</p>}
          <Button variant="cta" style={{ alignSelf: "flex-start" }} disabled={status === "sending"}>
            {status === "sending" ? "SENDING…" : "SEND ENQUIRY"}
          </Button>
        </form>
        )}
        <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
          <div>
            <Overline>SOFIA · HQ</Overline>
            <p style={{ font: "500 15px/1.6 var(--font-body)", margin: "10px 0 4px" }}>Hristina Morfova Str. 52, Entrance B, Apt 2<br/>1415 Sofia, Bulgaria</p>
            <span style={{ font: "500 12px/1 var(--font-mono)", color: "var(--steel)" }}>VAT BG205076885</span>
          </div>
          <div>
            <Overline>PLOVDIV</Overline>
            <p style={{ font: "500 15px/1.6 var(--font-body)", margin: "10px 0 0" }}>Georgi Benkovski Str. 35<br/>Plovdiv 4000</p>
          </div>
          <div>
            <Overline>PHONE</Overline>
            <p style={{ font: "500 15px/1.8 var(--font-mono)", margin: "10px 0 0" }}>BG +359 88 251 2110<br/>NL +31 6 27489622</p>
          </div>
          <div>
            <Overline>EMAIL</Overline>
            <p style={{ font: "500 14px/1.8 var(--font-mono)", margin: "10px 0 0" }}>metin.gurel@hunterinvestltd.com<br/>alp.gurel@hunterinvestltd.com</p>
          </div>
        </div>
      </div>
    </section>
  </>
  );
};

Object.assign(window, { Services, Equipment, Projects, About, Contact });