// editorial.jsx — Direction A: "Editorial Cover"
// Magazine-style. Bodoni Moda + Geist. Cream / charcoal / oxblood.
// data-al="…" attrs are responsive hooks targeted by Amanda Lee.html's media queries.

function EditorialPage({ accent = '#7a2e2a' }) {
  const cream = '#f3efe7';
  const ink = '#1a1815';
  const muted = '#615b50';
  const rule = 'rgba(26,24,21,0.12)';
  const contactEmail = 'hello@amandaelee.com';
  const contactMailto = `mailto:${contactEmail}`;
  const contactSubject = 'Amanda Lee Inquiry';

  function sendInquiry(event) {
    event.preventDefault();
    const form = event.currentTarget;
    const data = new FormData(form);
    const name = (data.get('name') || '').toString().trim();
    const brand = (data.get('brand') || '').toString().trim();
    const email = (data.get('email') || '').toString().trim();
    const message = (data.get('message') || '').toString().trim();
    const body = [
      `Name: ${name}`,
      `Brand: ${brand}`,
      `Email: ${email}`,
      '',
      'Inquiry:',
      message,
    ].join('\n');

    window.location.href = `${contactMailto}?subject=${encodeURIComponent(contactSubject)}&body=${encodeURIComponent(body)}`;
  }

  const wrap = {
    width: '100%',
    background: cream,
    color: ink,
    fontFamily: '"Geist", system-ui, sans-serif',
    fontSize: 14,
    lineHeight: 1.5,
  };

  const sectionPad = { padding: '80px 64px' };
  const eyebrow = {
    fontFamily: '"JetBrains Mono", ui-monospace, monospace',
    fontSize: 11,
    letterSpacing: '0.18em',
    textTransform: 'uppercase',
    color: muted,
  };
  const serif = { fontFamily: '"Bodoni Moda", "Times New Roman", serif', fontWeight: 400 };

  return (
    <div style={wrap} data-al="page">
      {/* ── Masthead nav ─────────────────────────────────────── */}
      <header data-al="header" style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px 32px', borderBottom: `1px solid ${rule}`,
      }}>
        <div style={{ ...eyebrow, fontSize: 10 }}>Vol. 01 · Spring/Summer ’26</div>
        <nav data-al="header-nav" style={{ display: 'flex', gap: 28, ...eyebrow, fontSize: 11 }}>
          <span>Work</span><span>Plans</span><span>Journal</span><span>Contact</span>
        </nav>
        <a
          href="https://instagram.com/amandaeliselee"
          target="_blank"
          rel="noopener noreferrer"
          aria-label="Amanda Lee on Instagram"
          style={{ ...eyebrow, fontSize: 10, color: muted, textDecoration: 'none' }}
        >↗ @amandaeliselee</a>
      </header>

      {/* ── HERO ─────────────────────────────────────────────── */}
      <section data-al="section" style={{ ...sectionPad, paddingTop: 56, paddingBottom: 40 }}>
        <div data-al="hero-meta" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 36 }}>
          <div style={eyebrow}>Issue Nº 01 — Method, Plans, Practice</div>
          <div style={eyebrow}>↓ Scroll for portfolio</div>
        </div>
        <div data-al="hero" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, alignItems: 'start' }}>
          <div>
            <h1 data-al="h1" style={{
              ...serif,
              fontSize: 152, lineHeight: 0.84, letterSpacing: '-0.04em',
              margin: '0 0 24px 0',
              fontStyle: 'normal',
            }}>
              Amanda<br/>
              <span style={{ fontStyle: 'italic', color: accent }}>Lee</span>
            </h1>
            <p data-al="leadp" style={{
              ...serif, fontSize: 30, lineHeight: 1.2, maxWidth: 560,
              margin: '0 0 36px 0', color: ink,
            }}>
              A celebrity training practice in print. Custom strength &amp; nutrition plans and method-led programming for athletes, founders, and the women who train serious.
            </p>
            <div data-al="hero-ctas" style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
              <a className="al-btn" style={{
                display: 'inline-flex', alignItems: 'center', gap: 10,
                padding: '14px 22px', background: ink, color: cream,
                borderRadius: 999, fontSize: 13, letterSpacing: '0.04em', textDecoration: 'none',
              }}>Get a custom plan <span>→</span></a>
              <a className="al-btn" style={{
                padding: '14px 22px', border: `1px solid ${ink}`, color: ink,
                borderRadius: 999, fontSize: 13, letterSpacing: '0.04em', textDecoration: 'none',
              }}>Brand partnerships</a>
            </div>
          </div>
          <image-slot id="editorial-cover"
            shape="rounded" radius="4"
            placeholder="Drop her cover photo (4:5)"
            style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '4 / 5' }}></image-slot>
        </div>

        {/* feature strip */}
        <div data-al="features" style={{
          marginTop: 56, paddingTop: 24, borderTop: `1px solid ${rule}`,
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24,
        }}>
          {[
            ['01', 'Strength', 'custom weekly'],
            ['02', 'Nutrition', 'custom 4-week'],
            ['03', 'Method', '12-week bundle'],
            ['04', 'Partnerships', 'select brand deals'],
          ].map(([n, t, s]) => (
            <div key={n}>
              <div style={{ ...eyebrow, marginBottom: 6 }}>{n}</div>
              <div style={{ ...serif, fontSize: 22, marginBottom: 2 }}>{t}</div>
              <div style={{ color: muted, fontSize: 13 }}>{s}</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── ON THE COVER (about) ─────────────────────────────── */}
      <section data-al="section" style={{ ...sectionPad, borderTop: `1px solid ${rule}` }}>
        <div data-al="about" style={{ display: 'grid', gridTemplateColumns: '180px 1fr 1fr', gap: 56, alignItems: 'start' }}>
          <div style={eyebrow}>On the cover</div>
          <div>
            <p data-al="about-lead" style={{ ...serif, fontSize: 26, lineHeight: 1.35, margin: 0 }}>
              <span style={{
                ...serif, fontStyle: 'italic', float: 'left', fontSize: 96, lineHeight: 0.8,
                paddingRight: 10, paddingTop: 6, color: accent,
              }}>A</span>
              celebrity trainer building a quieter, method-led practice. Featured in Vogue, GQ, Well+Good, and Equinox+.
            </p>
          </div>
          <div style={{ fontSize: 15, lineHeight: 1.7, color: muted }}>
            <p style={{ margin: '0 0 12px' }}>
              Amanda Lee trains clients across film, sport, and the founder set — strength and nutrition, programmed weekly to each client’s season. Over a decade of private practice and no scripted reels.
            </p>
            <p style={{ margin: '0 0 12px' }}>
              Custom plans are live below. The private 1:1 roster is currently full — waitlist by inquiry only.
            </p>
            <p style={{ margin: 0 }}>
              For collabs, press and partnerships: <a href={contactMailto} style={{ color: ink, textDecoration: 'underline' }}>{contactEmail}</a>
            </p>
          </div>
        </div>
      </section>

      {/* ── PRESS MARQUEE (kinetic, infinite) ────────────────── */}
      <section data-al="press" style={{
        borderTop: `1px solid ${rule}`, borderBottom: `1px solid ${rule}`,
        background: cream, overflow: 'hidden', padding: '28px 0',
      }}>
        <div style={{ display: 'flex', gap: 64, width: 'max-content', animation: 'al-marquee 38s linear infinite' }}>
          {[...Array(2)].map((_, dup) => (
            <div key={dup} style={{ display: 'flex', gap: 64, paddingRight: 64, flexShrink: 0 }}>
              {['As featured in', 'Vogue', 'GQ', 'Well + Good', 'Equinox+', 'The Cut', 'Harper’s Bazaar', 'Cosmopolitan'].map((b, i) => (
                <span key={i} data-al={i === 0 ? 'press-label' : 'press-name'} style={{
                  ...(i === 0
                    ? { ...eyebrow, color: muted, alignSelf: 'center' }
                    : { ...serif, fontSize: 44, fontStyle: 'italic', color: ink, lineHeight: 1, whiteSpace: 'nowrap' }),
                }}>
                  {b}{i !== 0 && <span style={{ color: accent, fontStyle: 'normal', marginLeft: 64 }}>·</span>}
                </span>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* ── PROGRAMS (table-style) ───────────────────────────── */}
      <section data-al="section" style={{ ...sectionPad, background: '#ebe5d8', borderTop: `1px solid ${rule}` }}>
        <div data-al="plans-head" style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 40 }}>
          <h2 style={{ ...serif, fontSize: 80, lineHeight: 0.9, margin: 0, letterSpacing: '-0.02em' }}>
            Plans<span style={{ fontStyle: 'italic', color: accent }}>.</span>
          </h2>
          <div style={{ ...eyebrow }}>Digital plans · PDF + app</div>
        </div>
        <div style={{ borderTop: `1px solid ${ink}` }}>
          {[
            ['01', 'Custom Strength Plan', '4 weeks · $240', 'Programmed weekly to your sport, schedule, and equipment. Voice notes + form-check videos.'],
            ['02', 'Custom Nutrition Plan', '4 weeks · $180', 'Built around how you actually eat, train, and travel. Updated as you go.'],
            ['03', 'The Method · 12-Week', 'bundle · $540', 'Strength, mobility, and nutrition in one progressive build. Most popular.'],
            ['04', 'Mobility Daily', 'free guide', '15-minute flows to keep between plans.'],
          ].map(([n, t, m, d]) => (
            <div key={n} className="al-plan-row" data-al="plan-row" style={{
              display: 'grid', gridTemplateColumns: '60px 1.4fr 1fr 1.4fr 120px',
              gap: 24, padding: '28px 0', borderBottom: `1px solid ${rule}`,
              alignItems: 'baseline', cursor: 'pointer',
            }}>
              <div data-al="plan-n" style={{ ...eyebrow }}>{n}</div>
              <div data-al="plan-t" style={{ ...serif, fontSize: 30 }}>{t}</div>
              <div data-al="plan-m" style={{ ...eyebrow, color: muted }}>{m}</div>
              <div data-al="plan-d" style={{ color: muted, fontSize: 14 }}>{d}</div>
              <div data-al="plan-cta" style={{ textAlign: 'right', ...eyebrow, color: accent }}>Get plan →</div>
            </div>
          ))}
        </div>
      </section>

      {/* ── INSIDE EVERY PLAN (bento) ────────────────────────── */}
      <section data-al="section" style={{ ...sectionPad, borderTop: `1px solid ${rule}` }}>
        <div data-al="inside-head" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', gap: 32, marginBottom: 40 }}>
          <div>
            <div style={{ ...eyebrow, marginBottom: 16 }}>Inside every plan</div>
            <h3 style={{ ...serif, fontSize: 96, lineHeight: 0.88, margin: 0, letterSpacing: '-0.04em' }}>
              Built for<br/><span style={{ fontStyle: 'italic', color: accent }}>your body</span> and your week.
            </h3>
          </div>
          <a className="al-btn" style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '14px 24px', background: ink, color: cream,
            borderRadius: 999, fontSize: 13, letterSpacing: '0.04em', textDecoration: 'none',
            whiteSpace: 'nowrap',
          }}>Browse plans <span>→</span></a>
        </div>

        <div data-al="bento" style={{
          display: 'grid',
          gridTemplateColumns: '5fr 7fr',
          gap: 0,
          border: `1px solid ${rule}`,
          borderRadius: 8,
          overflow: 'hidden',
          background: cream,
        }}>
          <image-slot id="editorial-plan-sample"
            shape="rounded" radius="0"
            placeholder="Drop a sample-plan image"
            style={{ display: 'block', width: '100%', height: 'auto', aspectRatio: '3 / 4', borderRight: `1px solid ${rule}` }}></image-slot>

          <div data-al="tiles" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gridTemplateRows: '1fr 1fr' }}>
            {[
              ['01', 'Intake call', '15 minutes, virtual. Sport, schedule, equipment, training history.'],
              ['02', 'Custom programming', 'Weekly strength, mobility, or nutrition — built around your week, not a template.'],
              ['03', 'Voice notes & form checks', 'Returned inside 24 hours. We adjust as you go, never on a calendar.'],
              ['04', 'Lifetime updates', 'Re-program once per quarter at no extra cost. The plan grows with you.'],
            ].map(([n, t, d], i) => (
              <div key={n} data-al="tile" style={{
                padding: 40,
                borderRight: i % 2 === 0 ? `1px solid ${rule}` : 'none',
                borderBottom: i < 2 ? `1px solid ${rule}` : 'none',
                display: 'flex', flexDirection: 'column', gap: 14,
                background: i === 0 ? '#ebe5d8' : cream,
              }}>
                <div style={{
                  ...eyebrow, color: accent, fontSize: 12,
                  display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <span style={{ display: 'inline-block', width: 24, height: 1, background: accent }} />
                  {n}
                </div>
                <div style={{ ...serif, fontSize: 30, lineHeight: 1.05, letterSpacing: '-0.01em' }}>{t}</div>
                <div style={{ color: muted, fontSize: 14, lineHeight: 1.6, marginTop: 'auto' }}>{d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── COLLAB / FOOTER ──────────────────────────────────── */}
      <section data-al="section" style={{ ...sectionPad, paddingTop: 96, paddingBottom: 96 }}>
        <div data-al="collab" style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80, alignItems: 'start' }}>
          <div>
            <div style={{ ...eyebrow, marginBottom: 18 }}>Brand partnerships</div>
            <h3 style={{ ...serif, fontSize: 96, lineHeight: 0.9, margin: '0 0 24px', letterSpacing: '-0.02em' }}>
              Promo &amp;<br/><span style={{ fontStyle: 'italic', color: accent }}>sponsor inquiries</span>.
            </h3>
            <p style={{ fontSize: 16, color: muted, maxWidth: 460, lineHeight: 1.55 }}>
              Currently accepting select promo and sponsorship deals with brands in performance, recovery, considered apparel, and wellness. Two- to four-week lead time. Long-form preferred.
            </p>
          </div>
          <form
            action={contactMailto}
            method="post"
            encType="text/plain"
            onSubmit={sendInquiry}
            style={{ display: 'flex', flexDirection: 'column', gap: 14 }}
          >
            {[
              ['Name', 'name', 'text', ''],
              ['Brand', 'brand', 'text', ''],
              ['Email', 'email', 'email', ''],
            ].map(([l, name, type, hint], i) => (
              <label key={name} style={{
                display: 'flex', flexDirection: 'column', gap: 6,
                paddingBottom: 10, borderBottom: `1px solid ${rule}`,
              }}>
                <span style={{ ...eyebrow, fontSize: 10 }}>{l}{hint && ` · ${hint}`}</span>
                <input name={name} type={type} autoComplete={name === 'email' ? 'email' : 'off'} style={{
                  height: 28, border: 'none', outline: 'none', padding: 0,
                  background: 'transparent', color: ink, font: 'inherit', fontSize: 16,
                }} />
              </label>
            ))}
            <label style={{
              display: 'flex', flexDirection: 'column', gap: 6,
              paddingBottom: 10, borderBottom: `1px solid ${rule}`,
            }}>
              <span style={{ ...eyebrow, fontSize: 10 }}>Tell me about it · 4 lines</span>
              <textarea name="message" rows="4" style={{
                minHeight: 88, resize: 'vertical', border: 'none', outline: 'none', padding: 0,
                background: 'transparent', color: ink, font: 'inherit', fontSize: 16,
              }} />
            </label>
            <button className="al-btn" style={{
              alignSelf: 'flex-start', marginTop: 12,
              background: ink, color: cream, border: 'none',
              padding: '14px 28px', borderRadius: 999, cursor: 'pointer',
              fontFamily: '"JetBrains Mono", monospace', fontSize: 11,
              letterSpacing: '0.14em', textTransform: 'uppercase',
            }}>Send inquiry →</button>
          </form>
        </div>
      </section>

      {/* footer */}
      <footer data-al="footer" style={{
        padding: '28px 32px', borderTop: `1px solid ${rule}`,
        display: 'flex', justifyContent: 'space-between', ...eyebrow, fontSize: 10,
      }}>
        <span>© 2026 Amanda Lee</span>
        <span>Set in Bodoni Moda &amp; Geist</span>
        <span>All rights reserved</span>
      </footer>
    </div>
  );
}

window.EditorialPage = EditorialPage;