/* global React, DEMO_PHOTOS */

function Story({ navigate }) {
  const GENERATIONS = [
    {
      n: "I",
      years: "1834 - 1871",
      name: "Tomas Egan",
      role: "Stonemason",
      story: "Tomas cut local stone from a quarry outside Tyrrellspass for the parish churches of north Westmeath. The trade was hand-tools and patience  -  a single doorway lintel could take three weeks. His tools, his name on each piece, his workshop on the same lane where ours sits today."
    },
    {
      n: "II",
      years: "1862 - 1908",
      name: "Martan Egan",
      role: "Headstones & sills",
      story: "Martan moved the work from churches to homes  -  window cills, hearths, the first headstones with the Egan name on the verso. He built the original cutting shed on the Kilbeggan road. Two of the walls are still standing inside our current factory."
    },
    {
      n: "III",
      years: "1898 - 1957",
      name: "Patrick Egan",
      role: "First polished worktops",
      story: "Patrick brought a polishing wheel back from a yard in Liverpool in 1923. He was the first stoneman in the midlands to offer a polished worktop  -  slate, mostly, with the occasional decorative stone for the houses around the lake."
    },
    {
      n: "IV",
      years: "1934 - 2002",
      name: "James Egan",
      role: "From slate to granite",
      story: "Granite arrived in containers from Brazil in the late seventies. James was first in the country to fit a granite kitchen  -  a farmhouse outside Mullingar, 1981. We have the original invoice on the office wall: GBP 742 including fitting."
    },
    {
      n: "V",
      years: "1968 - present",
      name: "Liam Egan",
      role: "The modern workshop",
      story: "Liam still walks the floor every morning. He bought the first bridge saw in the midlands in 1996, the first CNC waterjet in 2008, and the digital templating system in 2015. Forty years on the tools, and counting."
    },
    {
      n: "VI",
      years: "1992 - present",
      name: "Conor & Ailbhe Egan",
      role: "Current generation",
      story: "Conor runs the workshop and the four fit vans. Ailbhe runs the office, the showroom and the quotes. Between them they keep forty surfaces a week moving out the gate, with the same standard their great-great-grandfather set in 1834."
    },
  ];

  return (
    <React.Fragment>
      {/* Hero / Opening statement */}
      <section className="section deep" style={{paddingTop: "clamp(118px, 13vw, 170px)", paddingBottom: "clamp(70px, 8vw, 120px)", position: "relative", overflow: "hidden"}}>
        <div className="photo-hero" style={{position: "absolute", inset: 0, opacity: 0.4, backgroundImage: `url(${DEMO_PHOTOS.showroom})`}}>
          <span className="lbl">Workshop archive - sepia portrait, c. 1920</span>
        </div>
        <div style={{position: "absolute", inset: 0, background: "linear-gradient(to right, rgba(15,37,53,0.95) 30%, rgba(15,37,53,0.65))"}}></div>

        <div className="container" style={{position: "relative", zIndex: 2}}>
          <div className="kicker" style={{color: "#7CC3D8", marginBottom: 28}}>Our Story - Six generations - Since 1834</div>
          <h1 className="display" style={{color: "white", maxWidth: 1200}}>
            Stone has been in our family<br />for <em className="pull" style={{color: "#7CC3D8"}}>six generations.</em>
          </h1>
          <p style={{marginTop: 44, maxWidth: 660, fontSize: 19, lineHeight: 1.6, color: "rgba(255,255,255,0.85)"}}>
            One hundred and ninety-two years, an unbroken line of fathers, sons, daughters and apprentices, all cutting stone within five miles of the same village in the Irish midlands. We are, as far as we can tell, the longest continuously-operating stone fabricator on the island.
          </p>
          <p style={{marginTop: 28, maxWidth: 660, fontSize: 17, lineHeight: 1.6, color: "rgba(255,255,255,0.65)"}}>
            That is not a marketing line. The 1841 census lists Tomas Egan, stonemason, parish of Kilbeggan. Every generation since has put their name on the door of the workshop. Today the door says Conor.
          </p>
        </div>
      </section>

      {/* Timeline */}
      <section className="section" style={{background: "var(--warm)"}}>
        <div className="container">
          <div style={{textAlign: "center", marginBottom: 80}}>
            <div className="kicker" style={{marginBottom: 16}}>The Lineage</div>
            <h2 className="title" style={{color: "var(--navy)", maxWidth: 820, margin: "0 auto"}}>
              From parish lintels<br />to fitted islands.
            </h2>
          </div>

          {GENERATIONS.map((g, i) => {
            const reverse = i % 2 === 1;
            return (
              <div key={g.n} className="story-generation-grid" style={{
                display: "grid",
                gridTemplateColumns: "100px 1fr 1fr",
                gap: 48,
                alignItems: "center",
                padding: "60px 0",
                borderTop: i === 0 ? "1px solid var(--line)" : "none",
                borderBottom: "1px solid var(--line)",
              }}>
                <div style={{textAlign: "center"}}>
                  <div style={{fontFamily: "var(--serif)", fontSize: 64, fontWeight: 500, color: "var(--teal)", lineHeight: 1, fontStyle: "italic"}}>
                    {g.n}
                  </div>
                  <div style={{fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", color: "var(--grey)", marginTop: 12}}>
                    Gen.
                  </div>
                </div>

                {reverse ? (
                  <React.Fragment>
                    <div>
                      <div className="kicker" style={{marginBottom: 12}}>{g.years}</div>
                      <div style={{fontFamily: "var(--serif)", fontSize: 32, fontWeight: 500, color: "var(--navy)", marginBottom: 6}}>{g.name}</div>
                      <div style={{fontSize: 14, color: "var(--teal)", textTransform: "uppercase", letterSpacing: "0.14em", fontWeight: 500, marginBottom: 20}}>{g.role}</div>
                      <p style={{fontSize: 16, lineHeight: 1.65, color: "var(--slate)"}}>{g.story}</p>
                    </div>
                    <div className="img-ph warm" style={{aspectRatio: "5/4"}}>
                      <span className="lbl">Archive photograph - Gen. {g.n}</span>
                    </div>
                  </React.Fragment>
                ) : (
                  <React.Fragment>
                    <div className="img-ph" style={{aspectRatio: "5/4"}}>
                      <span className="lbl">Archive photograph - Gen. {g.n}</span>
                    </div>
                    <div>
                      <div className="kicker" style={{marginBottom: 12}}>{g.years}</div>
                      <div style={{fontFamily: "var(--serif)", fontSize: 32, fontWeight: 500, color: "var(--navy)", marginBottom: 6}}>{g.name}</div>
                      <div style={{fontSize: 14, color: "var(--teal)", textTransform: "uppercase", letterSpacing: "0.14em", fontWeight: 500, marginBottom: 20}}>{g.role}</div>
                      <p style={{fontSize: 16, lineHeight: 1.65, color: "var(--slate)"}}>{g.story}</p>
                    </div>
                  </React.Fragment>
                )}
              </div>
            );
          })}
        </div>
      </section>

      {/* The Factory */}
      <section className="section dark">
        <div className="container story-factory-grid" style={{display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 80, alignItems: "center"}}>
          <div>
            <div className="kicker on-dark" style={{color: "#7CC3D8", marginBottom: 24}}>Newtown, Kilbeggan - N91 FNK1</div>
            <h2 className="title" style={{color: "white"}}>
              Built around our<br /><em className="pull" style={{color: "#7CC3D8"}}>factory in Kilbeggan.</em>
            </h2>
            <p style={{marginTop: 32, fontSize: 17, lineHeight: 1.65, color: "rgba(255,255,255,0.8)", maxWidth: 520}}>
              Everything starts and ends here  -  a one-and-a-half acre yard on the old mill lane, with two cutting halls, a polishing line, a quality bay, a templating studio and a showroom of four hundred-plus slabs on rotating display.
            </p>
            <p style={{marginTop: 20, fontSize: 17, lineHeight: 1.65, color: "rgba(255,255,255,0.8)", maxWidth: 520}}>
              All four fit vans leave Kilbeggan every morning at 7:00. By 17:00 they are usually back, the day's tops fitted, the cab full of off-cuts and tea flasks. Holding all our stock on site means we do not wait on shipments  -  and you do not wait on us.
            </p>

            <div className="story-factory-stats" style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, marginTop: 56}}>
              {[
                ["1.5 ac", "Yard & workshop"],
                ["412", "Slabs on site"],
                ["4", "Fit vans"],
                ["7:00", "Vans depart"],
              ].map(([n, l]) => (
                <div key={l} style={{borderTop: "1px solid rgba(255,255,255,0.15)", paddingTop: 16}}>
                  <div style={{fontFamily: "var(--serif)", fontSize: 36, fontWeight: 500, color: "white", lineHeight: 1}}>{n}</div>
                  <div style={{fontSize: 12.5, color: "rgba(255,255,255,0.65)", marginTop: 8}}>{l}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Map-ish panel */}
          <div className="demo-photo-card" style={{aspectRatio: "4/5", position: "relative", backgroundImage: `url(${DEMO_PHOTOS.showroom})`}}>
            <span className="lbl">Factory exterior - golden hour</span>
          </div>
        </div>
      </section>

      {/* Values */}
      <section className="section lt">
        <div className="container">
          <div style={{textAlign: "center", marginBottom: 80}}>
            <div className="kicker" style={{marginBottom: 16}}>The Way We Work</div>
            <h2 className="title" style={{color: "var(--navy)", maxWidth: 820, margin: "0 auto"}}>
              Three rules, six generations old.
            </h2>
          </div>

          <div className="story-values-grid" style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48}}>
            {[
              {
                t: "Craft",
                s: "Every worktop is cut, finished and fitted by our own team. Nothing is sub-contracted out. The person who templates your kitchen will be at the workshop when it's cut, and on the van when it's fitted."
              },
              {
                t: "Speed",
                s: "Full slab stock on site, four fit vans, in-house templating. Once the kitchen is ready to measure, most in-stock worktops are fitted 7-14 days later. If a job needs longer, we'll tell you up front, and we'll tell you why."
              },
              {
                t: "Honesty",
                s: "The price we quote is the price you pay. The only thing that ever changes the bill is the customer changing the project  -  and we agree any extras in writing before we cut. No surprises. Ever."
              },
            ].map((v, i) => (
              <div key={v.t} style={{borderTop: "2px solid var(--teal)", paddingTop: 32}}>
                <div className="kicker" style={{color: "var(--grey)", marginBottom: 16}}>0{i + 1}</div>
                <h3 className="subtitle" style={{color: "var(--navy)", marginBottom: 20}}>{v.t}</h3>
                <p style={{fontSize: 15.5, lineHeight: 1.65, color: "var(--slate)"}}>{v.s}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Closing CTA */}
      <section className="section teal" style={{textAlign: "center"}}>
        <div className="container narrow">
          <h2 className="title" style={{color: "white"}}>
            Come see the workshop.
          </h2>
          <p style={{marginTop: 28, fontSize: 18, color: "rgba(255,255,255,0.9)", maxWidth: 520, margin: "28px auto 0", lineHeight: 1.6}}>
            We give a tour on Saturday mornings if you'd like one. No pressure, no pitch  -  just a coffee, the slabs, the saws, and a chat about what you're building.
          </p>
          <div style={{marginTop: 48, display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap"}}>
            <a className="btn btn-white" href="#/booking" onClick={(e) => { e.preventDefault(); navigate("booking"); }}>Book a Showroom Visit <span className="arr">{"->"}</span></a>
            <a className="btn btn-ghost" href="#/quotes" onClick={(e) => { e.preventDefault(); navigate("quotes"); }}>Get a Quote</a>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.Story = Story;