function StoryScreen({ onNavigate }) {
  const { Button, Divider, Icon } = window.CedarHollowWineryDesignSystem_a59a90;

  return (
    <div>
      {/* HERO */}
      <section style={{ background: "var(--surface-page)", padding: "100px 32px 40px", textAlign: "center" }}>
        <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>The Story</span>
        <h1 style={{ fontSize: 84, fontWeight: 300, letterSpacing: "-0.02em", margin: "20px auto 16px", maxWidth: "18ch", lineHeight: 1.0 }}>
          We planted a hill,<br/>and stayed <b style={{ fontWeight: 800 }}>on it.</b>
        </h1>
        <p style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 20, color: "var(--text-secondary)", maxWidth: "48ch", margin: "0 auto" }}>
          Eighteen vintages from the same fifty-six acres in Hye, Texas.
        </p>
      </section>

      {/* WIDE IMAGE */}
      <section style={{ maxWidth: 1280, margin: "0 auto", padding: "40px 32px 0" }}>
        <div style={{
          aspectRatio: "16/7", borderRadius: 4, overflow: "hidden",
          backgroundImage: "url('../../assets/photos/farmhouse-vineyard.jpg')",
          backgroundSize: "cover", backgroundPosition: "center",
        }}/>
      </section>

      {/* PROSE */}
      <section style={{ maxWidth: 720, margin: "0 auto", padding: "80px 32px 40px" }}>
        <p style={{ fontFamily: "var(--font-serif)", fontSize: 24, lineHeight: 1.5, color: "var(--text-primary)", fontStyle: "italic", marginTop: 0 }}>
          In 2008, Sam and Maria Coleman bought fifty-six acres of cedar-covered limestone in Hye, Texas, planted Tempranillo on the south slope, and waited.
        </p>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-secondary)", marginTop: 28 }}>
          The waiting was the easy part. The first vintage was small, honest, and sold out the same season. Word travels in Hill Country, and the wine got better year over year — the way a vineyard does when nobody touches it more than they have to.
        </p>
        <p style={{ fontSize: 17, lineHeight: 1.7, color: "var(--text-secondary)", marginTop: 16 }}>
          Eighteen vintages later, we've planted seven varietals across nine blocks, built a porch big enough to seat sixty, and grown into the wines we set out to make: Tempranillo, Tannat, Vermentino, Roussanne. Grapes that belong on this hill, in this climate, in this dirt. We make them slowly, in small numbers, and bottle them unfiltered. Then we open the porch.
        </p>
      </section>

      {/* TIMELINE */}
      <section style={{ maxWidth: 1080, margin: "32px auto", padding: "0 32px" }}>
        <Divider>Eighteen vintages</Divider>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, marginTop: 40 }}>
          {[
            { y: "2008", t: "First Tempranillo planted on the south block." },
            { y: "2012", t: "First commercial release. 412 cases, sold by spring." },
            { y: "2017", t: "Cellar door opens. The long table seats sixty." },
            { y: "2024", t: "Eighteen vintages. Nine blocks. One hillside." },
          ].map(m => (
            <div key={m.y} style={{ borderTop: "1px solid var(--border-default)", paddingTop: 18 }}>
              <div style={{
                fontFamily: "var(--font-serif)", fontStyle: "italic",
                fontSize: 44, fontWeight: 400, color: "var(--color-terracotta)",
                lineHeight: 1, marginBottom: 14,
              }}>{m.y}</div>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--text-secondary)", margin: 0 }}>{m.t}</p>
            </div>
          ))}
        </div>
      </section>

      {/* PEOPLE */}
      <section style={{ background: "var(--color-cream)", padding: "100px 32px", marginTop: 80 }}>
        <div style={{ maxWidth: 1080, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center" }}>
          <div style={{
            aspectRatio: "4/5",
            backgroundImage: "url('../../assets/photos/lounge-fireplace.jpg')",
            backgroundSize: "cover", backgroundPosition: "center",
            borderRadius: 4,
          }}/>
          <div>
            <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--color-oak)" }}>The Family</span>
            <h2 style={{ fontSize: 44, fontWeight: 300, letterSpacing: "-0.015em", margin: "16px 0 20px" }}>
              <b style={{ fontWeight: 800 }}>Sam, Maria, and Eli.</b>
            </h2>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-secondary)", maxWidth: "44ch" }}>
              Sam farms the blocks. Maria runs the cellar. Eli, who grew up in the rows, came home from Bordeaux in 2021 and now sits in on every blend. The three of them taste every wine, every Wednesday, before it goes to bottle.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: "var(--text-secondary)", marginTop: 16 }}>
              The team beyond the Colemans is small — fewer than a dozen — and most of them have been here a decade.
            </p>
          </div>
        </div>
      </section>

      {/* PRACTICES */}
      <section style={{ maxWidth: 1080, margin: "100px auto 0", padding: "0 32px" }}>
        <span style={{ fontSize: 11, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--text-accent)" }}>How We Farm</span>
        <h2 style={{ fontSize: 44, fontWeight: 800, letterSpacing: "-0.015em", margin: "16px 0 32px", maxWidth: "20ch" }}>
          Slow vines. Patient cellar.
        </h2>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
          {[
            { t: "Dry-farmed", d: "After year three, vines are on their own. The roots go deep; the wines do too." },
            { t: "Hand-harvested", d: "Picked at first light, sorted twice. Most fruit is in tank within four hours." },
            { t: "Native yeast", d: "We don't inoculate. The cellar has its own population, eighteen years on." },
          ].map(p => (
            <div key={p.t} style={{ paddingTop: 24, borderTop: "1px solid var(--border-default)" }}>
              <h3 style={{ fontSize: 22, fontWeight: 700, margin: "0 0 10px" }}>{p.t}</h3>
              <p style={{ fontSize: 15, lineHeight: 1.6, color: "var(--text-secondary)", margin: 0 }}>{p.d}</p>
            </div>
          ))}
        </div>
      </section>

      {/* CTA */}
      <section style={{ maxWidth: 1180, margin: "120px auto 0", padding: "0 32px" }}>
        <div style={{
          background: "var(--color-charcoal)", color: "var(--text-on-dark)",
          padding: "72px 64px", borderRadius: 4,
          display: "grid", gridTemplateColumns: "1fr auto", alignItems: "center", gap: 48,
        }}>
          <div>
            <h2 style={{ fontSize: 36, fontWeight: 300, letterSpacing: "-0.01em", margin: 0, maxWidth: "24ch" }}>
              Come <b style={{ fontWeight: 800 }}>see the hill.</b> The porch is always set.
            </h2>
          </div>
          <Button onClick={() => onNavigate("visit")}>Plan a Visit</Button>
        </div>
      </section>
    </div>
  );
}

window.StoryScreen = StoryScreen;