function HomeScreen({ onNavigate, onAddToCart }) {
  const { Button, Divider, Icon, WineCard } = window.CedarHollowWineryDesignSystem_a59a90;
  const featured = window.CHData.WINES.slice(0, 4);

  return (
    <div>
      {/* HERO — 10s looping motion montage with copy overlay */}
      <HeroVideo onNavigate={onNavigate}/>

      {/* PILLARS */}
      <section style={{ background: "var(--color-cream)", padding: "100px 32px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto" }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32 }}>
            {[
              { i: "grape", t: "Estate-grown", d: "Every wine starts in our blocks, on our hill. We don't buy fruit." },
              { i: "leaf", t: "Hand-harvested", d: "Pick by hand, at first light. Sort twice. Move slowly." },
              { i: "star", t: "Texas character", d: "Tempranillo, Tannat, Viognier, Blanc du Bois. Grapes that belong here." },
              { i: "wine-glass", t: "Open table", d: "Premium wines without the velvet rope. Everyone is welcome." },
            ].map(p => (
              <div key={p.t}>
                <Icon name={p.i} size={28} strokeWidth={1.25}/>
                <h3 style={{ fontSize: 16, fontWeight: 700, margin: "16px 0 8px" }}>{p.t}</h3>
                <p style={{ color: "var(--text-secondary)", fontSize: 14, lineHeight: 1.55, margin: 0 }}>{p.d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED WINES */}
      <section style={{ maxWidth: 1180, margin: "0 auto", padding: "100px 32px 40px" }}>
        <div style={{ marginBottom: 40 }}>
          <Divider>The 2023 + 2021 Releases</Divider>
        </div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", marginBottom: 32 }}>
          <h2 style={{ fontSize: 48, fontWeight: 300, letterSpacing: "-0.015em", margin: 0, maxWidth: "16ch" }}>
            From the south slope, <b style={{ fontWeight: 800 }}>this season.</b>
          </h2>
          <Button variant="link" onClick={() => onNavigate("shop")}>Shop all wines  →</Button>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {featured.map(w => (
            <WineCard key={w.id} {...w} onClick={() => onNavigate("wine:" + w.id)} onAdd={() => onAddToCart(w)} />
          ))}
        </div>
      </section>

      {/* STORY BLOCK */}
      <section style={{ padding: "120px 32px 100px" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 80, alignItems: "center" }}>
          <div style={{
            aspectRatio: "4/5",
            backgroundImage: "url('../../assets/photos/vineyard-sunset.jpg')",
            backgroundSize: "cover", backgroundPosition: "center",
            borderRadius: 4,
          }}/>
          <div>
            <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--color-oak)" }}>The Place</span>
            <h2 style={{ fontSize: 56, fontWeight: 300, letterSpacing: "-0.015em", margin: "20px 0" }}>
              Eighteen vintages,<br/><b style={{ fontWeight: 800 }}>one hillside.</b>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.65, color: "var(--text-secondary)", maxWidth: "44ch", margin: 0 }}>
              The Coleman family planted the first block of Tempranillo in 2008 on a south-facing slope of iron-rich limestone, twenty miles east of Fredericksburg. The hill is the same hill. The cedars are the same cedars. The wines have only grown into themselves.
            </p>
            <div style={{ marginTop: 32 }}>
              <Button variant="secondary" onClick={() => onNavigate("story")}>Read the story</Button>
            </div>
          </div>
        </div>
      </section>

      {/* VISIT TEASER */}
      <section style={{ maxWidth: 1180, margin: "0 auto", padding: "0 32px" }}>
        <div style={{
          position: "relative", borderRadius: 4, overflow: "hidden",
          minHeight: 460,
          backgroundImage: "linear-gradient(to right, rgba(42,37,32,0.55), rgba(42,37,32,0.05) 60%, transparent), url('../../assets/photos/oak-table.jpg')",
          backgroundSize: "cover", backgroundPosition: "center",
          display: "flex", alignItems: "center",
        }}>
          <div style={{ color: "var(--color-parchment)", padding: "60px 64px", maxWidth: 540 }}>
            <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--color-terracotta-soft)" }}>The Cellar Door</span>
            <h2 style={{ fontSize: 48, fontWeight: 300, letterSpacing: "-0.015em", margin: "16px 0 12px" }}>
              Open <b style={{ fontWeight: 800 }}>Thu — Sun.</b>
            </h2>
            <p style={{ color: "var(--text-on-dark-muted)", fontSize: 16, lineHeight: 1.65, maxWidth: "40ch" }}>
              Six pours, a long table under the live oaks, and a view of the south block. Reservations recommended on weekends.
            </p>
            <div style={{ marginTop: 28 }}>
              <Button onClick={() => onNavigate("visit")}>Book a Tasting</Button>
            </div>
          </div>
        </div>
      </section>

      {/* CLUB STRIP */}
      <section style={{ padding: "100px 32px 0" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", textAlign: "center" }}>
          <Divider>The Wine Club</Divider>
          <h2 style={{ fontSize: 40, fontWeight: 300, letterSpacing: "-0.015em", margin: "32px auto 12px", maxWidth: "22ch" }}>
            Three bottles a season. <b style={{ fontWeight: 800 }}>The hill, in the mail.</b>
          </h2>
          <p style={{ color: "var(--text-secondary)", fontSize: 16, lineHeight: 1.6, maxWidth: "52ch", margin: "0 auto 28px" }}>
            Three membership tiers — Cellar Door, Reserve, Library. First call on every release, members-only allocations, and an open invitation to harvest dinner.
          </p>
          <Button onClick={() => onNavigate("club")}>Compare memberships</Button>
        </div>
      </section>
    </div>
  );
}

/**
 * HeroVideo
 * ----------
 * 10-second looping motion piece.
 *
 * SHIPPED PLACEHOLDER (live now):
 *   A CSS-orchestrated 3-scene Ken Burns montage built from the real
 *   property photos — gathering (oak-table), grove flyover (farmhouse +
 *   vineyard), sunset (vineyard-sunset). Each scene is ~3.3s with crossfade
 *   between them, looping seamlessly.
 *
 * TO SWAP IN REAL VIDEO (when delivered):
 *   1. Drop the MP4 into `assets/video/hero.mp4` (also `.webm` ideal).
 *   2. Change `useRealVideo` to true below. The montage stays as the poster
 *      while the video loads, then video plays on top.
 *   3. Recommended encoding: 1920×1080, ~5–8 Mbps, no audio, 10s loop point.
 */
function HeroVideo({ onNavigate }) {
  const { Button } = window.CedarHollowWineryDesignSystem_a59a90;
  const useRealVideo = false; // ← flip to true once assets/video/hero.mp4 exists

  return (
    <section style={{ background: "var(--surface-page)", padding: "0 0 96px" }}>
      <div style={{
        position: "relative",
        minHeight: 720,
        height: "calc(100vh - 88px)",
        maxHeight: 860,
        overflow: "hidden",
      }}>
        {/* Motion layer */}
        <KenBurnsMontage/>
        {useRealVideo && (
          <video autoPlay muted loop playsInline preload="auto" style={{
            position: "absolute", inset: 0, width: "100%", height: "100%",
            objectFit: "cover", zIndex: 1,
          }}>
            <source src="../../assets/video/hero.mp4" type="video/mp4"/>
            <source src="../../assets/video/hero.webm" type="video/webm"/>
          </video>
        )}

        {/* Readability gradient */}
        <div aria-hidden style={{
          position: "absolute", inset: 0, zIndex: 2,
          background: "linear-gradient(to bottom, rgba(20,16,12,0.5) 0%, rgba(20,16,12,0.15) 38%, rgba(20,16,12,0.55) 100%)",
        }}/>

        {/* Copy */}
        <div style={{
          position: "relative", zIndex: 3,
          height: "100%",
          display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center",
          textAlign: "center", padding: "0 32px",
          color: "var(--color-parchment)",
        }}>
          <div className="brand-kicker" style={{ display: "inline-flex", alignItems: "center", gap: 12, color: "var(--color-terracotta-soft)", marginBottom: 28 }}>
            <span style={{ width: 28, height: 1, background: "currentColor" }}/>
            <span>Texas Hill Country · Est. 2008</span>
            <span style={{ width: 28, height: 1, background: "currentColor" }}/>
          </div>
          <p style={{
            fontFamily: "var(--font-sans)", fontSize: 18, letterSpacing: "0.08em",
            textTransform: "uppercase", fontWeight: 700,
            margin: "0 0 22px", color: "rgba(250,247,242,0.92)",
            textShadow: "0 1px 18px rgba(0,0,0,0.45)",
          }}>
            Estate wines. Gathered moments.
          </p>
          <h1 className="brand-hero-title" style={{
            fontSize: 104, lineHeight: 0.96, letterSpacing: 0,
            margin: 0, fontWeight: 300, color: "var(--color-parchment)",
            maxWidth: "16ch",
            textShadow: "0 2px 24px rgba(0,0,0,0.45)",
          }}>
            Where the land<br/>meets the <b style={{ fontWeight: 800 }}>glass.</b>
          </h1>
          <p style={{
            marginTop: 28, fontSize: 18, lineHeight: 1.55, maxWidth: "52ch",
            color: "rgba(250,247,242,0.88)",
            textShadow: "0 1px 18px rgba(0,0,0,0.45)",
          }}>
            Estate-grown wines from our family vineyards in the rolling hills of Cedar Hollow.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 40, justifyContent: "center" }}>
            <Button onClick={() => onNavigate("shop")}>Shop the Release</Button>
            <button onClick={() => onNavigate("visit")} style={{
              background: "transparent", color: "var(--color-parchment)",
              border: "1px solid rgba(250,247,242,0.55)",
              padding: "12px 22px", fontSize: 12, fontWeight: 800,
              letterSpacing: "0.08em", textTransform: "uppercase",
              borderRadius: 4, cursor: "pointer",
            }}>Plan a Visit</button>
          </div>

          {/* Scene indicator dots */}
          <div style={{
            position: "absolute", bottom: 36, left: 0, right: 0,
            display: "flex", justifyContent: "center", gap: 8,
          }}>
            {["Gathered moments", "Over the grove", "Golden hour"].map((label, i) => (
              <span key={label} className={`hero-scene-dot hero-scene-dot-${i}`} title={label} style={{
                width: 32, height: 2, background: "rgba(250,247,242,0.28)",
                position: "relative", overflow: "hidden", borderRadius: 999,
              }}>
                <span style={{
                  position: "absolute", inset: 0, background: "var(--color-parchment)",
                  transformOrigin: "left",
                  animation: `hero-dot-${i} 10s cubic-bezier(0.4,0,0.2,1) infinite`,
                }}/>
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function KenBurnsMontage() {
  // Three scenes; each visible ~3.5s, ~0.5s crossfade. Total loop 10s.
  // Each layer gets a slow pan/zoom keyframe; the parent crossfades via opacity.
  const scenes = [
    { src: "../../assets/photos/oak-table.jpg",         label: "gathering" },
    { src: "../../assets/photos/farmhouse-vineyard.jpg", label: "grove" },
    { src: "../../assets/photos/vineyard-sunset.jpg",   label: "sunset" },
  ];
  return (
    <div aria-hidden style={{ position: "absolute", inset: 0, zIndex: 0, background: "var(--color-charcoal)" }}>
      {scenes.map((s, i) => (
        <div key={i} className={`hero-scene hero-scene-${i}`} style={{
          position: "absolute", inset: 0, overflow: "hidden",
          animation: `hero-fade-${i} 10s linear infinite`,
        }}>
          <div style={{
            position: "absolute", inset: "-6%",
            backgroundImage: `url('${s.src}')`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            animation: `hero-zoom-${i} 10s linear infinite`,
            willChange: "transform",
          }}/>
        </div>
      ))}
      <style>{`
        /* Scene fades — 3 segments, crossfading */
        @keyframes hero-fade-0 {
          0%, 30% { opacity: 1; }
          35%, 95% { opacity: 0; }
          100% { opacity: 1; }
        }
        @keyframes hero-fade-1 {
          0%, 30% { opacity: 0; }
          35%, 63% { opacity: 1; }
          68%, 100% { opacity: 0; }
        }
        @keyframes hero-fade-2 {
          0%, 63% { opacity: 0; }
          68%, 95% { opacity: 1; }
          100% { opacity: 0; }
        }

        /* Ken Burns pans — different motion per scene */
        @keyframes hero-zoom-0 {
          0%   { transform: scale(1.05) translate(-2%, 0); }
          100% { transform: scale(1.10) translate(2%, -1%); }
        }
        @keyframes hero-zoom-1 {
          0%   { transform: scale(1.00) translate(0, 0); }
          100% { transform: scale(1.10) translate(0, -2%); }
        }
        @keyframes hero-zoom-2 {
          0%   { transform: scale(1.08) translate(2%, 1%); }
          100% { transform: scale(1.00) translate(-1%, 0); }
        }

        /* Scene indicator progress fills */
        @keyframes hero-dot-0 {
          0%   { transform: scaleX(0); }
          30%  { transform: scaleX(1); }
          35%, 100% { transform: scaleX(0); }
        }
        @keyframes hero-dot-1 {
          0%, 30% { transform: scaleX(0); }
          63% { transform: scaleX(1); }
          68%, 100% { transform: scaleX(0); }
        }
        @keyframes hero-dot-2 {
          0%, 63% { transform: scaleX(0); }
          95% { transform: scaleX(1); }
          100% { transform: scaleX(0); }
        }

        @media (prefers-reduced-motion: reduce) {
          .hero-scene > div { animation: none !important; }
          .hero-scene-dot > span { animation: none !important; transform: scaleX(1); }
        }
      `}</style>
    </div>
  );
}

window.HomeScreen = HomeScreen;