// Agora Editorial — magazine-style index of features and stories.

const Editorial = ({ setRoute }) => {
  const palettes = window.AG_DATA.palettes;
  const features = [
    { eyebrow:'The Hermès Index · Spring 26', title:'What a Birkin actually costs in 2026.', body:'The sticker price hides three other numbers. We compared 1,204 sales across four cities to find the real cost — and the real margin.', meta:'14 min · Maya Antinora · 11 April 2026', palette: palettes.cocoa },
    { eyebrow:'Sourcing', title:'A week in Aoyama.', body:'Three days, twenty-two appointments, four bags.', meta:'6 min · Yuki Tanabe · 4 April 2026', palette: palettes.chalk },
    { eyebrow:'Authentication', title:'How fake gets fakier.', body:'A walk-through of the seven points that finally caught the new generation of super-fakes.', meta:'12 min · Lena Vossen · 27 March 2026', palette: palettes.ink },
    { eyebrow:'Vintage', title:'The Comme des Garçons archive boom.', body:'Why 1998 is suddenly worth four times what 1995 is.', meta:'9 min · M. Reuter · 18 March 2026', palette: palettes.olive },
    { eyebrow:'Logistics', title:'DDP — and why you pay €0 at the door.', body:'How the customs lane changed for resale luxury between 2023 and now.', meta:'4 min · The Editors · 1 March 2026', palette: palettes.sand },
    { eyebrow:'Studio visit', title:'Inside Rive Droite, Paris.', body:'Maya Antinora has been sourcing Hermès for 15 years. The atelier is on the third floor; the bell still rings.', meta:'10 min · Editorial · 22 February 2026', palette: palettes.burgundy },
  ];

  return (
    <div>
      <section style={{ background:'var(--ag-paper)', padding:'72px 0 56px' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-eyebrow">Editorial · Volume 14 · Spring 26</div>
          <h1 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 120, lineHeight: 1, marginTop: 18, letterSpacing:'-0.02em' }}>Reading list.</h1>
          <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, color:'var(--ag-ink-2)', maxWidth: 580 }}>
            Long-form on the pieces, the people, and the logistics. Updated weekly. No sponsored placements.
          </p>
        </div>
      </section>

      <section style={{ padding:'56px 0' }}>
        <div className="ag-shell ag-shell--wide">
          {/* Big lead feature */}
          <div style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr', gap: 48, alignItems:'center', cursor:'pointer' }}>
            <div style={{ aspectRatio:'4/3', overflow:'hidden' }}>
              <ProductTile item={{ palette: features[0].palette, brand:'' }} showWatermark={false} style={{ aspectRatio:'auto', height:'100%' }}/>
            </div>
            <div>
              <div className="ag-eyebrow">{features[0].eyebrow}</div>
              <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 64, lineHeight: 1, marginTop: 18, letterSpacing:'-0.01em' }}>{features[0].title}</h2>
              <p style={{ marginTop: 24, fontSize: 17, lineHeight: 1.6, color:'var(--ag-ink-2)' }}>{features[0].body}</p>
              <div className="ag-mono" style={{ marginTop: 24, fontSize: 12, color:'var(--ap-fg-faint)' }}>{features[0].meta}</div>
              <button className="ag-btn" style={{ marginTop: 28, background:'transparent', color:'var(--ap-fg)' }}>Read the report <Icon name="arrow-right" size={12}/></button>
            </div>
          </div>
        </div>
      </section>

      <section style={{ padding:'24px 0 96px' }}>
        <div className="ag-shell ag-shell--wide">
          <div className="ag-between" style={{ marginBottom: 32, alignItems:'flex-end' }}>
            <h2 className="ag-h2">More stories</h2>
            <div className="ag-flex ag-gap-2">
              {['All','Sourcing','Authentication','Vintage','Studio visits','Logistics'].map((c, i) => (
                <span key={c} className={`ag-chip${i===0?' ag-chip--active':''}`}>{c}</span>
              ))}
            </div>
          </div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 32 }}>
            {features.slice(1).map((f, i) => (
              <div key={i} style={{ cursor:'pointer' }}>
                <div style={{ aspectRatio:'4/5', overflow:'hidden' }}>
                  <ProductTile item={{ palette: f.palette, brand:'' }} showWatermark={false} style={{ aspectRatio:'auto', height:'100%' }}/>
                </div>
                <div style={{ paddingTop: 18 }}>
                  <div className="ag-eyebrow">{f.eyebrow}</div>
                  <h3 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 28, lineHeight: 1.1, marginTop: 10, letterSpacing:'-0.005em' }}>{f.title}</h3>
                  <p style={{ marginTop: 12, fontSize: 14, color:'var(--ap-fg-muted)', lineHeight: 1.55 }}>{f.body}</p>
                  <div className="ag-mono" style={{ marginTop: 12, fontSize: 11, color:'var(--ap-fg-faint)' }}>{f.meta}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Newsletter */}
      <section style={{ background:'var(--ag-ink)', color:'#fff', padding:'80px 0' }}>
        <div className="ag-shell ag-shell--wide" style={{ textAlign:'center' }}>
          <div className="ag-eyebrow" style={{ color:'rgba(255,255,255,0.5)' }}>The Agora dispatch</div>
          <h2 style={{ fontFamily:'var(--ag-font-serif)', fontStyle:'italic', fontSize: 64, marginTop: 14, lineHeight: 1 }}>Sundays only.</h2>
          <p style={{ marginTop: 18, color:'rgba(255,255,255,0.65)', maxWidth: 480, margin:'18px auto 32px' }}>One story, one piece, one number. 32k readers. Unsubscribe in one click.</p>
          <div className="ag-flex ag-gap-2" style={{ maxWidth: 480, margin:'0 auto' }}>
            <input className="ag-input" placeholder="Your email" style={{ background:'transparent', borderColor:'rgba(255,255,255,0.2)', color:'#fff' }}/>
            <button className="ag-btn" style={{ background:'#fff', color:'var(--ag-ink)', borderColor:'#fff' }}>Subscribe</button>
          </div>
        </div>
      </section>
    </div>
  );
};

window.Editorial = Editorial;