// Homepage — editorial, lifestyle-first, warm
function Home({ go }) {
  const heroLayout = window.TWEAKS?.heroLayout || 'asymmetric';

  return (
    <div>
      {/* HERO */}
      {heroLayout === 'asymmetric' && <HeroFullbleed go={go} />}
      {heroLayout === 'centered' && <HeroCentered go={go} />}
      {heroLayout === 'fullbleed' && <HeroAsymmetric go={go} />}

      {/* MARQUEE — what we write about */}
      <Marquee />

      {/* DIRECTORY TEASER */}
      <DirectoryTeaser go={go} />

      {/* THIS WEEK — editorial triptych */}
      <ThisWeek go={go} />

      {/* GOODS / HEMP HOME */}
      <Goods />

      {/* FIELD NOTES — pull quote */}
      <PullQuote />

      {/* STATES GRID */}
      <StatesGrid go={go} />

      {/* NEWSLETTER */}
      <Newsletter />
    </div>
  );
}

// ───────── HERO: asymmetric editorial ─────────
function HeroAsymmetric({ go }) {
  return (
    <section style={{
      maxWidth: 'var(--maxw)', margin: '0 auto',
      padding: '60px var(--gutter) 100px',
      position: 'relative',
    }} className="linen">
      <div style={{
        display: 'grid', gridTemplateColumns: '1.15fr 1fr', gap: 60, alignItems: 'end',
        position: 'relative',
      }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 28 }}>Issue no. 14 · Spring 2026</div>
          <h1 className="serif" style={{
            fontSize: 'clamp(56px, 7vw, 104px)',
            lineHeight: 0.98, margin: 0, fontWeight: 400,
            letterSpacing: '-0.02em',
          }}>
            Cannabis,
            <br />
            <em style={{ fontStyle: 'italic', color: 'var(--accent-deep)' }}>slowly.</em>
          </h1>
          <p style={{
            marginTop: 36, maxWidth: 480, fontSize: 18, lineHeight: 1.6,
            color: 'var(--ink-soft)',
          }}>
            A field guide to good shops, soft linens, and the quiet afternoon. We write about cannabis the way a friend would — over coffee, without rush.
          </p>
          <div style={{ display: 'flex', gap: 14, marginTop: 40, alignItems: 'center' }}>
            <button className="btn btn-primary" onClick={() => go('/directory')}>
              <Icon.search size={14}/> Find a shop near you
            </button>
            <a className="tlink" href="#stories" style={{ fontSize: 14 }}>Read this week's letter</a>
          </div>
          <div style={{
            marginTop: 56, display: 'flex', gap: 28, alignItems: 'center',
            paddingTop: 24, borderTop: '1px solid var(--hairline)',
            fontSize: 12, color: 'var(--ink-soft)', letterSpacing: '0.08em', textTransform: 'uppercase',
          }}>
            <span>As recommended in</span>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 18, textTransform: 'none', letterSpacing: 0 }}>Kinfolk</span>
            <span className="dot"></span>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 18, textTransform: 'none', letterSpacing: 0, fontStyle: 'italic' }}>Apartamento</span>
            <span className="dot"></span>
            <span style={{ fontFamily: 'var(--serif)', fontSize: 18, textTransform: 'none', letterSpacing: 0 }}>NYT Wirecutter</span>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <WarmImg src={IMG.hempFarm} placeholder="hemp farm at golden hour" aspect="4/5"
                   style={{ borderRadius: 2 }} />
          <div style={{
            position: 'absolute', right: -24, bottom: -32,
            background: 'var(--bg-tint)', padding: '22px 26px',
            maxWidth: 260, boxShadow: '0 20px 40px rgba(0,0,0,0.08)',
          }}>
            <div className="eyebrow" style={{ marginBottom: 8 }}>Our promise</div>
            <div className="serif" style={{ fontSize: 20, lineHeight: 1.3 }}>
              No clinical talk. No hard sells. Just good recommendations.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HeroCentered({ go }) {
  return (
    <section style={{
      maxWidth: 980, margin: '0 auto', textAlign: 'center',
      padding: '100px var(--gutter) 80px',
    }}>
      <div className="eyebrow" style={{ marginBottom: 32 }}>Est. 2019 · ✻ · Issue No. 14</div>
      <h1 className="serif" style={{
        fontSize: 'clamp(60px, 8vw, 128px)', lineHeight: 0.96,
        margin: 0, fontWeight: 400, letterSpacing: '-0.025em',
      }}>
        Cannabis, <em style={{ fontStyle: 'italic', color: 'var(--accent-deep)' }}>slowly.</em>
      </h1>
      <p style={{ margin: '36px auto 0', maxWidth: 540, fontSize: 18, lineHeight: 1.6, color: 'var(--ink-soft)' }}>
        A field guide to good shops, soft linens, and the quiet afternoon. We write about cannabis the way a friend would — over coffee, without rush.
      </p>
      <div style={{ display: 'flex', gap: 14, marginTop: 36, justifyContent: 'center' }}>
        <button className="btn btn-primary" onClick={() => go('/directory')}>
          <Icon.search size={14}/> Find a shop near you
        </button>
        <a className="tlink" href="#stories" style={{ fontSize: 14 }}>Read this week's letter</a>
      </div>
      <div style={{ marginTop: 64 }}>
        <WarmImg src={IMG.hero} aspect="21/9" placeholder="golden-hour field" />
      </div>
    </section>
  );
}

function HeroFullbleed({ go }) {
  return (
    <section style={{ position: 'relative', height: '90vh', minHeight: 640, overflow: 'hidden' }}>
      <WarmImg src={IMG.hempFarm} aspect={undefined} placeholder="hemp farm, golden hour"
               style={{ position: 'absolute', inset: 0, height: '100%' }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(58,58,58,0.15) 0%, rgba(58,58,58,0.65) 100%)',
      }} />
      <div style={{
        position: 'relative', zIndex: 2, color: 'white',
        maxWidth: 'var(--maxw)', margin: '0 auto', height: '100%',
        padding: '0 var(--gutter) 80px',
        display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
      }}>
        <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.75)', marginBottom: 28 }}>Issue no. 14 · Spring 2026</div>
        <h1 className="serif" style={{
          fontSize: 'clamp(64px, 9vw, 140px)', lineHeight: 0.96,
          margin: 0, fontWeight: 400, maxWidth: 900,
          letterSpacing: '-0.025em',
        }}>
          Cannabis, <em style={{ fontStyle: 'italic' }}>slowly.</em>
        </h1>
        <p style={{ marginTop: 28, maxWidth: 540, fontSize: 18, lineHeight: 1.6, opacity: 0.9 }}>
          A field guide to good shops, soft linens, and the quiet afternoon.
        </p>
        <div style={{ display: 'flex', gap: 14, marginTop: 36 }}>
          <button className="btn" onClick={() => go('/directory')} style={{ background: 'white', color: 'var(--ink)' }}>
            <Icon.search size={14}/> Find a shop near you
          </button>
        </div>
      </div>
    </section>
  );
}

// ───────── MARQUEE ─────────
function Marquee() {
  const items = ['Hemp bedding', '✻', 'Dispensary directory', '·', 'Slow living', '✻', 'Farmers market finds', '·', 'Evening rituals', '✻', 'Apothecary', '·', 'Culture essays'];
  return (
    <div style={{
      background: 'var(--bg-tint)', borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)',
      overflow: 'hidden', position: 'relative',
    }}>
      <div style={{
        display: 'flex', gap: 40, padding: '22px 0', whiteSpace: 'nowrap',
        animation: 'marquee 40s linear infinite',
        fontFamily: 'var(--serif)', fontSize: 24, color: 'var(--ink)',
      }}>
        {[...items, ...items, ...items].map((x, i) => <span key={i}>{x}</span>)}
      </div>
      <style>{`@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-33.33%) } }`}</style>
    </div>
  );
}

// ───────── DIRECTORY TEASER ─────────
function DirectoryTeaser({ go }) {
  const [zip, setZip] = React.useState('');
  return (
    <section style={{
      maxWidth: 'var(--maxw)', margin: '0 auto', padding: '120px var(--gutter)',
    }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 80, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 20 }}>— The directory</div>
          <h2 className="serif" style={{ fontSize: 'clamp(40px, 4.5vw, 64px)', lineHeight: 1.05, margin: 0, fontWeight: 400, letterSpacing: '-0.02em' }}>
            Good shops, written up like you'd tell a friend.
          </h2>
          <p style={{ fontSize: 17, color: 'var(--ink-soft)', marginTop: 24, lineHeight: 1.6, maxWidth: 440 }}>
            Every listing is visited, photographed, and reviewed by a human. No bought placements. Hours, vibe, what to ask for.
          </p>

          <form onSubmit={(e) => { e.preventDefault(); go('/directory'); }}
                style={{ marginTop: 40, display: 'flex', gap: 8, alignItems: 'stretch',
                         background: 'white', padding: 8, borderRadius: 999, boxShadow: '0 1px 0 var(--hairline)', maxWidth: 460 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 16px', color: 'var(--ink-soft)' }}>
              <Icon.pin size={16}/>
            </div>
            <input placeholder="City, state, or ZIP" value={zip} onChange={e => setZip(e.target.value)}
                   style={{ border: 'none', outline: 'none', flex: 1, fontFamily: 'var(--sans)', fontSize: 15, background: 'transparent', color: 'var(--ink)' }}/>
            <button className="btn btn-primary" type="submit" style={{ padding: '12px 20px', fontSize: 13 }}>
              Browse <Icon.arrow size={12}/>
            </button>
          </form>

          <div style={{ marginTop: 24, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {['Brooklyn', 'Los Angeles', 'Portland', 'Denver', 'Austin', 'San Francisco'].map(c => (
              <button key={c} className="chip" onClick={() => go('/directory')} style={{ cursor: 'pointer' }}>{c}</button>
            ))}
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            <WarmImg src={IMG.dispensary1} aspect="3/4" placeholder="warm shop interior" />
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16, paddingTop: 40 }}>
              <WarmImg src={IMG.dispensary3} aspect="1/1" placeholder="storefront" />
              <WarmImg src={IMG.dispensary4} aspect="1/1" placeholder="shop detail" />
            </div>
          </div>
          <div style={{
            position: 'absolute', top: 30, left: -24,
            background: 'var(--ink)', color: 'var(--off-white)',
            padding: '16px 22px', borderRadius: 4,
            display: 'flex', alignItems: 'center', gap: 14,
            boxShadow: '0 20px 40px rgba(0,0,0,0.15)',
          }}>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 28 }}>412</div>
            <div>
              <div style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.15em', textTransform: 'uppercase' }}>Shops visited</div>
              <div style={{ fontSize: 13, opacity: 0.9, marginTop: 2 }}>Across 38 states</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ───────── THIS WEEK ─────────
function ThisWeek({ go }) {
  const stories = [
    { cat: 'At home', title: 'Nine ways to set a slow evening', read: '6 min read', img: IMG.market, author: 'Maren Olsen' },
    { cat: 'Field notes', title: 'The shop in Hudson that feels like a kitchen', read: '4 min read', img: IMG.dispensary2, author: 'Teo Vasquez' },
    { cat: 'Rituals', title: 'A quiet morning, a soft chair, a small pour', read: '8 min read', img: IMG.tea, author: 'Jun Park' },
  ];
  return (
    <section id="stories" style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '60px var(--gutter) 100px' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>— This week</div>
          <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 52px)', margin: 0, lineHeight: 1.05, fontWeight: 400, letterSpacing: '-0.02em' }}>
            Dispatches from the porch.
          </h2>
        </div>
        <a href="#" className="tlink" style={{ fontSize: 14 }}>All stories →</a>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40 }}>
        {stories.map((s, i) => (
          <article key={i} className="story-card" style={{ cursor: 'pointer' }}>
            <div className="story-img-wrap" style={{ overflow: 'hidden', marginBottom: 20, position: 'relative' }}>
              <WarmImg src={s.img} aspect="4/5" placeholder="editorial" />
            </div>
            <div className="eyebrow" style={{ marginBottom: 12, color: 'var(--accent-deep)' }}>{s.cat}</div>
            <h3 className="serif" style={{ fontSize: 26, lineHeight: 1.2, margin: 0, fontWeight: 500, letterSpacing: '-0.01em' }}>{s.title}</h3>
            <div style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-soft)' }}>
              By {s.author} <span className="dot"></span> {s.read}
            </div>
          </article>
        ))}
      </div>
    </section>
  );
}

// ───────── GOODS ─────────
function Goods() {
  const goods = [
    { name: 'Heavy linen throw', price: '$142', tag: 'Hemp + cotton', img: IMG.bedding },
    { name: 'Field candle, No. 3', price: '$38', tag: 'Sage & cedar', img: IMG.candle },
    { name: 'Apothecary set', price: '$86', tag: 'Small batch', img: IMG.herbs },
    { name: 'Everyday mug', price: '$24', tag: 'Local potter', img: IMG.tea },
  ];
  return (
    <section style={{ background: 'var(--bg-tint)', position: 'relative' }} className="linen">
      <div style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '100px var(--gutter)', position: 'relative' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 56 }}>
          <div>
            <div className="eyebrow" style={{ marginBottom: 16 }}>— Goods we love</div>
            <h2 className="serif" style={{ fontSize: 'clamp(36px, 4vw, 52px)', margin: 0, lineHeight: 1.05, fontWeight: 400, letterSpacing: '-0.02em' }}>
              Hemp linen, small candles,<br/>things that feel lived-in.
            </h2>
          </div>
          <a href="#" className="tlink" style={{ fontSize: 14 }}>Shop the field →</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {goods.map((g, i) => (
            <div key={i} style={{ cursor: 'pointer' }}>
              <div style={{ background: 'white', padding: 12, marginBottom: 14 }}>
                <WarmImg src={g.img} aspect="1/1" placeholder={g.name.toLowerCase()} />
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                <div>
                  <div className="serif" style={{ fontSize: 18, fontWeight: 500 }}>{g.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-soft)', marginTop: 2 }}>{g.tag}</div>
                </div>
                <div className="serif" style={{ fontSize: 18, color: 'var(--accent-deep)' }}>{g.price}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── PULL QUOTE ─────────
function PullQuote() {
  return (
    <section style={{ maxWidth: 900, margin: '0 auto', padding: '140px var(--gutter)', textAlign: 'center' }}>
      <div className="eyebrow" style={{ marginBottom: 32, color: 'var(--accent-deep)' }}>— A note from the editor</div>
      <blockquote className="serif" style={{
        margin: 0, fontSize: 'clamp(28px, 3.4vw, 44px)', lineHeight: 1.25,
        fontStyle: 'italic', fontWeight: 400, letterSpacing: '-0.01em',
      }}>
        "We are not a dispensary. We are not in the hurry business. We're the friend who knows the good shop on the corner, the right linen sheets, and when to put the phone down."
      </blockquote>
      <div style={{ marginTop: 40, fontSize: 13, color: 'var(--ink-soft)', letterSpacing: '0.15em', textTransform: 'uppercase' }}>
        Maren Olsen · Editor
      </div>
    </section>
  );
}

// ───────── STATES GRID ─────────
function StatesGrid({ go }) {
  const states = [
    ['California', 94], ['New York', 58], ['Oregon', 41], ['Washington', 37],
    ['Colorado', 44], ['Illinois', 28], ['Massachusetts', 22], ['Michigan', 33],
    ['Nevada', 19], ['Arizona', 24], ['New Jersey', 17], ['Vermont', 11],
  ];
  return (
    <section style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '100px var(--gutter)' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 80 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>— Browse by state</div>
          <h2 className="serif" style={{ fontSize: 'clamp(32px, 3.4vw, 44px)', margin: 0, lineHeight: 1.1, fontWeight: 400, letterSpacing: '-0.02em' }}>
            Find your people's<br/>local shop.
          </h2>
          <p style={{ fontSize: 15, color: 'var(--ink-soft)', marginTop: 20, lineHeight: 1.6 }}>
            Explore every visited shop, by state. Filter by vibe — quiet, social, artsy, utilitarian — or by what they're known for.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--hairline)', borderLeft: '1px solid var(--hairline)' }}>
          {states.map(([name, count]) => (
            <button key={name} onClick={() => go('/directory')}
                    style={{
                      background: 'transparent', border: 'none', borderRight: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)',
                      padding: '24px 20px', textAlign: 'left', cursor: 'pointer',
                      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
                      transition: 'background 200ms ease',
                    }}
                    onMouseEnter={e => e.currentTarget.style.background = 'var(--bg-tint)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
              <span style={{ fontFamily: 'var(--serif)', fontSize: 22, color: 'var(--ink)' }}>{name}</span>
              <span style={{ fontSize: 12, color: 'var(--ink-soft)', fontFamily: 'var(--sans)' }}>{count} shops</span>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

// ───────── NEWSLETTER ─────────
function Newsletter() {
  return (
    <section style={{ maxWidth: 'var(--maxw)', margin: '0 auto', padding: '40px var(--gutter) 0' }}>
      <div style={{
        background: 'var(--accent)', color: 'white',
        borderRadius: 4, padding: 'clamp(48px, 6vw, 80px)',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <div className="linen" style={{ position: 'absolute', inset: 0, mixBlendMode: 'overlay' }}></div>
        <div style={{ position: 'relative' }}>
          <div className="eyebrow" style={{ color: 'rgba(255,255,255,0.7)', marginBottom: 20 }}>The Sunday letter</div>
          <h2 className="serif" style={{ fontSize: 'clamp(32px, 3.6vw, 48px)', margin: 0, fontWeight: 400, lineHeight: 1.1, letterSpacing: '-0.01em' }}>
            One warm email,<br/>on Sunday morning.
          </h2>
        </div>
        <div style={{ position: 'relative' }}>
          <p style={{ margin: 0, opacity: 0.9, fontSize: 16, lineHeight: 1.6 }}>
            A short letter from the editor — one shop to visit, one thing to try at home, one essay worth your time. No noise.
          </p>
          <form onSubmit={e => { e.preventDefault(); alert('Thanks — see you Sunday.'); }}
                style={{ marginTop: 28, display: 'flex', gap: 8, background: 'white', padding: 8, borderRadius: 999 }}>
            <input placeholder="your@email.com"
                   style={{ border: 'none', outline: 'none', flex: 1, background: 'transparent', padding: '10px 14px', fontSize: 14, color: 'var(--ink)' }}/>
            <button type="submit" className="btn btn-primary" style={{ padding: '12px 22px' }}>Subscribe <Icon.arrow size={12}/></button>
          </form>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Home });
