/* global React */

// Hero carousel — real life around the worktop. Each photo gets a line that
// ties the moment to the kitchen (the "it's not home without stone" feeling).
const HERO_MOMENTS = [
  { photo: "/images/moment-young-couple.jpg", line: "For the first home" },
  { photo: "/images/moment-dinner-party.jpg", line: "For the dinner parties" },
  { photo: "/images/moment-lads.jpg",         line: "For the days with the boys" },
  { photo: "/images/moment-family.jpg",       line: "For the school mornings" },
  { photo: "/images/moment-old-couple.jpg",   line: "For the Sunday dinners" },
  { photo: "/images/moment-women-wine.jpg",   line: "For the wine with the girls" },
  { photo: "/images/moment-girls-drinks.jpg", line: "For the pre-drinks" },
  { photo: "/images/moment-debs.jpg",         line: "For the big nights out" },
];

function Home({ navigate }) {
  const [slide, setSlide] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setSlide(s => (s + 1) % HERO_MOMENTS.length), 5000);
    return () => clearInterval(t);
  }, []);
  return (
    <React.Fragment>
      {/* ============== HERO ============== */}
      <section className="home-hero" style={{position: "relative", display: "flex", flexDirection: "column", justifyContent: "center", padding: "var(--pad)", paddingTop: "112px", overflow: "hidden", color: "white"}}>
        {/* Crossfading people-moment carousel */}
        {HERO_MOMENTS.map((m, i) => (
          <div key={i} aria-hidden="true" style={{position: "absolute", inset: 0, backgroundImage: `url(${m.photo})`, backgroundSize: "cover", backgroundPosition: "center", opacity: i === slide ? 1 : 0, transition: "opacity 1.5s ease-in-out"}}></div>
        ))}
        {/* Dark overlay for legibility */}
        <div style={{position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(15,37,53,0.44) 0%, rgba(15,37,53,0.68) 100%)"}}></div>

        <div className="container fade-up" style={{position: "relative", zIndex: 2, paddingTop: "8vh"}}>
          <h1 className="display" style={{maxWidth: 1100, lineHeight: 1.02, paddingBottom: "0.08em"}}>
            It's not home<br />
            <em className="pull" style={{fontStyle: "italic", color: "#7CC3D8"}}>without stone.</em>
          </h1>
          <div style={{position: "relative", height: 18, marginTop: 22}}>
            {HERO_MOMENTS.map((m, i) => (
              <span key={i} className="kicker" style={{position: "absolute", left: 0, top: 0, whiteSpace: "nowrap", color: "#7CC3D8", fontSize: 13, opacity: i === slide ? 1 : 0, transition: "opacity 1.5s ease-in-out"}}>
                {m.line}
              </span>
            ))}
          </div>
          <p className="lede" style={{maxWidth: 560, marginTop: 18, color: "rgba(255,255,255,0.82)", fontSize: 19}}>
            Six generations of the Egan family, cutting and fitting stone from our workshop in Kilbeggan since 1834.
          </p>
          <div className="hero-action-row">
            {[
              { title: "See Our Work", sub: "Projects across Ireland", href: "#/work", route: "work" },
              { title: "Book a Visit", sub: "See every slab in the showroom", href: "#/booking", route: "booking", featured: true },
              { title: "Get a Quote", sub: "Estimate in minutes, no commitment", href: "#/quotes", route: "quotes" },
            ].map(card => (
              <a key={card.route} href={card.href}
                 onClick={(e) => { e.preventDefault(); navigate(card.route); }}
                 className={"hero-action-card" + (card.featured ? " featured" : "")}>
                <div className="hero-action-title">{card.title}</div>
                <div className="hero-action-sub">{card.sub}</div>
                <div className="hero-action-arrow">→</div>
              </a>
            ))}
          </div>
        </div>

        {/* Bottom meta strip */}
        <div style={{position: "absolute", bottom: 40, left: "var(--pad)", right: "var(--pad)", display: "flex", justifyContent: "space-between", alignItems: "flex-end", zIndex: 2}}>
          <div style={{display: "flex", gap: 8}} role="tablist" aria-label="Hero moments">
            {HERO_MOMENTS.map((m, i) => (
              <button key={i} type="button" aria-label={m.line} aria-selected={i === slide}
                onClick={() => setSlide(i)}
                style={{width: i === slide ? 24 : 8, height: 8, borderRadius: 4, border: "none", padding: 0, cursor: "pointer", background: i === slide ? "#7CC3D8" : "rgba(255,255,255,0.4)", transition: "width 0.4s ease, background 0.4s ease"}} />
            ))}
          </div>
          <div className="hero-coords" style={{textAlign: "right", fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.7)", lineHeight: 1.8}}>
            <div>53.3654 deg N - 7.5070 deg W</div>
            <div>5 Lower Main St, Kilbeggan</div>
          </div>
        </div>
      </section>

      {/* ============== KEY STATS ============== */}
      <section className="section dark tight" style={{paddingTop: "clamp(70px, 8vw, 110px)", paddingBottom: "clamp(70px, 8vw, 110px)"}}>
        <div className="container">
          <div className="home-stats-grid" style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 40}}>
            {[
              { fig: "6", suffix: "", label: "Generations of craftsmen", sub: "since 1834" },
              { fig: "40", suffix: "+", label: "Worktops fitted every week", sub: "across 26 counties" },
              { fig: "7", suffix: "-14 days", label: "From measure to fitted", sub: "after kitchen is ready" },
            ].map((s, i) => (
              <div key={i} style={{borderLeft: i > 0 ? "1px solid rgba(255,255,255,0.08)" : "none", paddingLeft: i > 0 ? 40 : 0}}>
                <div style={{fontFamily: "var(--serif)", fontSize: "clamp(80px, 11vw, 156px)", fontWeight: 500, lineHeight: 0.9, letterSpacing: "-0.03em", color: "white", display: "flex", alignItems: "baseline"}}>
                  {s.fig}<span style={{fontSize: "0.45em", color: "#7CC3D8", marginLeft: 4}}>{s.suffix}</span>
                </div>
                <div style={{marginTop: 24, fontSize: 15, color: "rgba(255,255,255,0.85)", maxWidth: 240, fontWeight: 400}}>{s.label}</div>
                <div style={{marginTop: 8, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "#7CC3D8"}}>{s.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== FEATURED WORK ============== */}
      <section className="section">
        <div className="container">
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 56, flexWrap: "wrap", gap: 24}}>
            <div>
              <div className="kicker" style={{marginBottom: 16}}>Selected Projects</div>
              <h2 className="title" style={{maxWidth: 700}}>Cut for kitchens<br />from Galway to Dublin.</h2>
            </div>
            <a className="btn-text" href="#/work" onClick={(e) => { e.preventDefault(); navigate("work"); }}>
              View projects <span>{"->"}</span>
            </a>
          </div>

          {/* Masonry-ish 3-col grid */}
          <div className="home-work-grid" style={{display: "grid", gridTemplateColumns: "repeat(12, 1fr)", gap: 16}}>
            {[
              { name: "Calescato", material: "Quartz", col: "1 / 6", h: 520, photo: "/images/quartz-calescato-1.jpg" },
              { name: "Violuxe", material: "Quartz", col: "6 / 13", h: 380, photo: "/images/quartz-violuxe-1.jpg" },
              { name: "Tagore", material: "Quartz", col: "6 / 9", h: 280, photo: "/images/quartz-tagore-1.jpg" },
              { name: "Perecimo", material: "Granite", col: "9 / 13", h: 280, photo: "/images/granite-perecimo-1.jpg" },
              { name: "Layla", material: "Quartz", col: "1 / 6", h: 360, photo: "/images/quartz-layla-1.jpg" },
            ].map((p, i) => (
              <div key={i} className="work-card demo-photo-card" style={{gridColumn: p.col, height: p.h, backgroundImage: `url(${p.photo})`}}>
                <div className="work-img" aria-hidden="true" style={{width: "100%", height: "100%"}}></div>
                <div className="work-meta">
                  <div className="work-loc">{p.material}</div>
                  <div className="work-name">{p.name}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== TURNAROUND PROMISE ============== */}
      <section className="section lt">
        <div className="container home-promise-grid" style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center"}}>
          <div>
            <div className="kicker" style={{marginBottom: 24}}>The Egan promise</div>
            <h2 className="title" style={{color: "var(--navy)"}}>
              Measured when ready.<br />
              <em className="pull" style={{color: "var(--teal)"}}>Fitted 7-14 days later.</em>
            </h2>
            <p className="body-text" style={{marginTop: 32, maxWidth: 460, color: "var(--slate)", fontSize: 17}}>
              Once your kitchen units are fitted, level and ready to template, our measurer can take a digital template on site. From that measure, most quartz, granite and porcelain worktops are fabricated and fitted within 7-14 days.
            </p>
            <p className="body-text" style={{marginTop: 20, maxWidth: 460, color: "var(--slate)", fontSize: 17}}>
              Many customers book their measure about a week after the kitchen is installed, so the full journey depends on when the room is ready.
            </p>
            <a className="btn-text" href="#/story" onClick={(e) => { e.preventDefault(); navigate("story"); }} style={{marginTop: 36, display: "inline-flex"}}>
              How the workshop runs <span>{"->"}</span>
            </a>
          </div>

          {/* Timeline */}
          <div>
            {[
              { day: "01", label: "Kitchen ready", time: "Units in and level", desc: "We book the measure once the room is ready to template." },
              { day: "02", label: "Digital template", time: "On site", desc: "Our measurer arrives with a laser jig. Templating takes around 45 minutes." },
              { day: "03", label: "Cut & polish", time: "At the workshop", desc: "Saws, edge profilers and hand finishing, all in Kilbeggan." },
              { day: "04", label: "Quality check", time: "Factory floor", desc: "Every piece is checked before it leaves." },
              { day: "05", label: "Fitted & sealed", time: "Usually 7-14 days after measure", desc: "Two fitters, a clean install, sealant, and the kitchen is ready for final connections." },
            ].map((step, i, a) => (
              <div key={i} style={{display: "grid", gridTemplateColumns: "70px 1fr", gap: 24, padding: "26px 0", borderBottom: i < a.length - 1 ? "1px solid rgba(27,61,90,0.1)" : "none"}}>
                <div style={{fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--teal)", paddingTop: 4}}>
                  {step.day}
                </div>
                <div>
                  <div style={{fontFamily: "var(--serif)", fontSize: 26, fontWeight: 500, color: "var(--navy)"}}>{step.label}</div>
                  <div style={{marginTop: 6, fontSize: 16, color: "var(--slate)"}}>{step.time} - {step.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== MATERIALS STRIP ============== */}
      <section className="section">
        <div className="container">
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 48, flexWrap: "wrap", gap: 24}}>
            <div>
              <div className="kicker" style={{marginBottom: 16}}>The Materials</div>
              <h2 className="title" style={{maxWidth: 760}}>What we work with.</h2>
            </div>
            <a className="btn-text" href="#/materials" onClick={(e) => { e.preventDefault(); navigate("materials"); }}>
              Explore all materials <span>{"->"}</span>
            </a>
          </div>

          <div className="home-material-grid" style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12}}>
            {[
              { name: "Quartz", desc: "Engineered. Low maintenance.", cls: "stone-quartz", photo: "/images/quartz-circe-slab.jpg" },
              { name: "Granite", desc: "Natural. Each slab unique.", cls: "stone-granite", photo: "/images/granite-perecimo-slab.jpg" },
              /* PORCELAIN_HIDDEN — restore when stock is sufficient
              { name: "Porcelain", desc: "Hard-wearing. Heat-proof.", cls: "stone-porcelain" }, */
            ].map((m, i) => (
              <a key={i} href="#/materials" onClick={(e) => { e.preventDefault(); navigate("materials"); }} style={{cursor: "pointer"}}>
                <div className={`stone ${m.cls}`} style={{aspectRatio: "3/4", marginBottom: 18, position: "relative", overflow: "hidden"}}>
                  {m.photo && <img src={m.photo} alt={m.name} style={{position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover"}} onError={(e) => { e.currentTarget.style.display = "none"; }} />}
                </div>
                <div style={{fontFamily: "var(--serif)", fontSize: 24, fontWeight: 500, color: "var(--navy)", marginBottom: 4}}>{m.name}</div>
                <div style={{fontSize: 13, color: "var(--grey)"}}>{m.desc}</div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* ============== TESTIMONIALS ============== */}
      <section className="section deep">
        <div className="container">
          <div className="eyebrow on-dark" style={{marginBottom: 24, color: "#7CC3D8"}}>From kitchens, not catalogues</div>
          <h2 className="title" style={{color: "white", maxWidth: 700, marginBottom: 80}}>
            We let our customers<br /><em className="pull" style={{color: "#7CC3D8"}}>do the talking.</em>
          </h2>

          <div className="home-testimonial-grid" style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48}}>
            {[
              {
                quote: "Couldn't recommend highly enough. We got a lovely slab of 'Muse' quartz from Egans. Very reasonable and nice to deal with. Measure and installation for a full kitchen including all cut outs done in 1 week.",
                name: "Michael Cawley",
                place: "Google Review ★★★★★",
                material: "Muse Quartz · Full Kitchen"
              },
              {
                quote: "They were incredibly flexible with moving timelines and put a rush on my fitting to facilitate a tight deadline. The guys who came to measure and fit were complete gentlemen and went above and beyond. To top it off, they came in under budget.",
                name: "Linda Neill",
                place: "Google Review ★★★★★",
                material: "Kitchen Worktops"
              },
              {
                quote: "The owner was chatty, charismatic and extremely knowledgeable. He instantly got a sense of what we wanted and his first recommendation was so spot on we picked it on the spot. His lads turned up on the day he promised and did a superb job. Egans are a prime example of a good Irish business.",
                name: "Richard Cosgrove",
                place: "Google Review ★★★★★",
                material: "Quartz Worktops · New Kitchen"
              },
            ].map((t, i) => (
              <div key={i}>
                <div className="testimonial-photo" style={{aspectRatio: "4/3", marginBottom: 32, backgroundImage: `url(${["/images/quartz-sweet-caroline-1.jpg", "/images/quartz-paradise-1.jpg", "/images/quartz-tagore-2.jpg"][i]})`}}></div>
                <div style={{fontFamily: "var(--serif)", fontSize: 21, fontWeight: 400, lineHeight: 1.45, color: "white", fontStyle: "italic"}}>
                  "{t.quote}"
                </div>
                <div style={{marginTop: 28, paddingTop: 24, borderTop: "1px solid rgba(255,255,255,0.1)"}}>
                  <div style={{fontSize: 14, color: "white", fontWeight: 500}}>{t.name}</div>
                  <div style={{fontSize: 13, color: "rgba(255,255,255,0.6)", marginTop: 4}}>{t.place}</div>
                  <div style={{fontFamily: "var(--mono)", fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "#7CC3D8", marginTop: 12}}>{t.material}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ============== QUOTE CTA ============== */}
      <section className="section teal" style={{textAlign: "center"}}>
        <div className="container narrow">
          <div className="eyebrow on-dark" style={{color: "rgba(255,255,255,0.8)", marginBottom: 32}}>One conversation away</div>
          <h2 className="title" style={{color: "white"}}>
            Ready to start<br />
            <em className="pull">Tell us about your project.</em>
          </h2>
          <p style={{marginTop: 32, fontSize: 18, lineHeight: 1.6, color: "rgba(255,255,255,0.9)", maxWidth: 540, margin: "32px auto 0"}}>
            A three-minute form gives our office everything they need to send you an honest, all-in estimate  -  usually within 24 hours.
          </p>
          <div style={{marginTop: 48}}>
            <a className="btn btn-white" href="#/quotes" onClick={(e) => { e.preventDefault(); navigate("quotes"); }} style={{padding: "22px 36px", fontSize: 14}}>
              Get a Quote <span className="arr">{"->"}</span>
            </a>
          </div>
          <div style={{marginTop: 24, fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.75)"}}>
            Most quotes returned within 24 hours - No obligation - Free site measure
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

window.Home = Home;