// landing-editorial.jsx — Direction A: Editorial Premium
// Ivory bg, ink type, crimson accent. Bricolage display + Manrope body.
// Magazine grid, generous gutters, big display text, thin rules.

// ─── PhotoSlot — image-slot wrapper that respects an aspect ratio ───────
function PhotoSlot({ id, ratio = '4/3', tone = 'crimson', placeholder = 'Drop an image', radius = 0 }) {
  const tones = {
    crimson: { a: '#9b2c2c', b: '#1a0a08' },
    gold: { a: '#c9a256', b: '#2a1f10' },
    ink: { a: '#3a342e', b: '#0d0c0a' },
    ivory: { a: '#e8dcc4', b: '#857553' },
    sepia: { a: '#b07a3a', b: '#1c130a' },
    deep: { a: '#5b1f1f', b: '#0a0606' }
  };
  const t = tones[tone] || tones.crimson;
  return (
    <div style={{
      position: 'relative',
      width: '100%',
      aspectRatio: ratio,
      borderRadius: radius,
      overflow: 'hidden',
      backgroundColor: t.b,
      backgroundImage: `
        repeating-linear-gradient(118deg, rgba(255,255,255,0.045) 0 1.5px, transparent 1.5px 9px),
        radial-gradient(120% 90% at 30% 20%, ${t.a}cc 0%, ${t.b} 65%),
        linear-gradient(135deg, ${t.b} 0%, ${t.a} 100%)
      `
    }}>
      <image-slot
        id={id}
        shape="rect"
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
        placeholder={placeholder} />
      
    </div>);

}

function LandingBrooklyn({ heroVariant = 'split', accentOverride, fontOverride }) {
  const c = {
    bg: '#f4ede0',
    bgSoft: '#ebe3d2',
    ink: '#1a1714',
    inkSoft: 'rgba(26,23,20,0.62)',
    inkLine: 'rgba(26,23,20,0.18)',
    accent: accentOverride || '#9b2c2c',
    cream: '#fbf6ec'
  };
  const display = fontOverride?.display || '"Bricolage Grotesque", system-ui, sans-serif';
  const body = fontOverride?.body || '"Manrope", system-ui, sans-serif';

  const S = {
    root: {
      width: 1280, background: c.bg, color: c.ink,
      fontFamily: body, fontFeatureSettings: '"ss01","ss02"',
      letterSpacing: '-0.005em'
    },
    container: { paddingLeft: 64, paddingRight: 64 },
    h1: { fontFamily: display, fontWeight: 600, lineHeight: 0.92, letterSpacing: '-0.035em' },
    eyebrow: {
      fontFamily: '"JetBrains Mono", ui-monospace, monospace',
      fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
      color: c.accent
    },
    rule: { height: 1, background: c.inkLine, border: 0 },
    btnPrimary: {
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '14px 22px', borderRadius: 999,
      background: c.ink, color: c.cream, border: 0,
      fontFamily: body, fontSize: 14, fontWeight: 600, letterSpacing: '0.01em',
      cursor: 'pointer'
    },
    btnGhost: {
      display: 'inline-flex', alignItems: 'center', gap: 10,
      padding: '14px 22px', borderRadius: 999,
      background: 'transparent', color: c.ink,
      border: `1.2px solid ${c.ink}`,
      fontFamily: body, fontSize: 14, fontWeight: 600, letterSpacing: '0.01em',
      cursor: 'pointer'
    }
  };

  return (
    <div className="brk-root" style={S.root}>
      {/* ── NAV ─────────────────────────────────────────── */}
      <nav style={{ ...S.container, height: 84, display: 'flex', alignItems: 'center', justifyContent: 'space-between', borderBottom: `1px solid ${c.inkLine}` }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <BrandMark size={32} fg={c.ink} />
          <Wordmark color={c.ink} size={14} />
        </div>
        <div style={{ display: 'flex', gap: 36, fontSize: 14, color: c.inkSoft, fontWeight: 500 }}>
          {COPY.navLinks.map((l) => <a key={l} style={{ color: 'inherit', textDecoration: 'none' }}>{l}</a>)}
        </div>
        <a href="https://wa.me/6590117805" target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
          <button style={S.btnPrimary}>
            Book $25 trial
            <span style={{ fontSize: 18, lineHeight: 0 }}>→</span>
          </button>
        </a>
      </nav>

      {/* ── HERO ────────────────────────────────────────── */}
      <BrooklynHero variant={heroVariant} c={c} S={S} display={display} />

      {/* ── LESSONS (age-banded + pricing, combined) ────── */}
      <section style={{ ...S.container, paddingTop: 80, paddingBottom: 72 }}>
        <div style={{ marginBottom: 40 }}>
          <div style={S.eyebrow}>Lessons &amp; pricing</div>
          <h2 style={{ ...S.h1, fontSize: 48, margin: '12px 0 0', maxWidth: 720 }}>
            A method that <em style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400, color: c.accent }}>grows</em> with the student.
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 28 }}>
          {[
          {
            tag: 'Ages 6–9',
            title: 'First chords, first songs',
            body: 'Real foundations, laid patiently. Practice that feels like play.\n40 minutes is the right dose for under-10 attention spans.',
            price: 'S$180',
            sub: '4 × 40 min lessons / month',
            duration: '40 min',
            tone: 'crimson',
            featured: false,
            bullets: [
            'Weekly lesson at home',
            'Loaner guitar available',
            'Songs chosen with your child']

          },
          {
            tag: 'Ages 10+, teens & adults',
            title: 'Technique, theory & exams if you want it',
            body: 'Foundations that hold up under a busy school or work week. Graded curriculum (e.g. Trinity) upon request.',
            price: 'S$230',
            sub: '4 × 1 hour lessons / month',
            duration: '1 hr',
            tone: 'sepia',
            featured: true,
            bullets: [
            'Weekly lesson at home',
            'Curriculum built around your songs',
            'Trinity / Rockschool prep on request']

          }].
          map((p) =>
          <div key={p.title} style={{
            border: `1px solid ${c.inkLine}`,
            background: c.cream,
            color: c.ink,
            padding: 0,
            position: 'relative',
            display: 'flex',
            flexDirection: 'column'
          }}>
              <div style={{ position: 'relative' }}>
                <PhotoSlot id={"lesson-" + p.tag.replace(/[^a-z0-9]/gi, "-").toLowerCase()} ratio="16/9" tone={p.tone} placeholder={`Drop photo for ${p.tag}`} />
                {/* Duration chip overlay — semi-transparent dark pill, top-right */}
                <div style={{
                position: 'absolute',
                top: 16,
                right: 16,
                padding: '7px 14px',
                background: c.accent,
                borderRadius: 999,
                color: '#fbf6ec',
                fontFamily: '"JetBrains Mono", ui-monospace, monospace',
                fontSize: 11,
                letterSpacing: '0.16em',
                textTransform: 'uppercase',
                fontWeight: 600,
                boxShadow: '0 4px 12px rgba(155,44,44,0.35)',
                pointerEvents: 'none',
                zIndex: 2
              }}>
                  {p.duration} / lesson
                </div>
              </div>
              <div style={{ padding: '28px 32px 36px', display: 'flex', flexDirection: 'column', flex: 1 }}>
                <div style={{
                ...S.eyebrow,
                color: c.accent,
                fontSize: 14,
                letterSpacing: '0.18em'
              }}>{p.tag}</div>
                <div style={{
                marginTop: 14,
                fontFamily: display,
                fontSize: 28,
                fontWeight: 600,
                letterSpacing: '-0.02em',
                lineHeight: 1.1
              }}>{p.title}</div>
                <p style={{
                marginTop: 16,
                fontSize: 17,
                lineHeight: 1.55,
                color: c.ink,
                marginBottom: 28,
                whiteSpace: 'pre-line'
              }}>{p.body}</p>

                <hr style={{ ...S.rule, background: c.inkLine, margin: 0 }} />

                <div style={{ marginTop: 28, display: 'flex', alignItems: 'baseline', gap: 16, flexWrap: 'wrap' }}>
                  <span style={{ fontFamily: display, fontSize: 48, fontWeight: 600, letterSpacing: '-0.03em', lineHeight: 1 }}>{p.price}</span>
                  <span style={{ fontSize: 15, color: c.ink, fontWeight: 500, letterSpacing: '-0.005em' }}>{p.sub}</span>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Small print: transport fee → link to Where we travel section */}
        <p style={{
          marginTop: 24,
          fontSize: 13,
          color: c.inkSoft,
          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          letterSpacing: '0.04em',
          textAlign: 'right'
        }}>
          A small transport fee applies outside our{' '}
          <a href="#travel" style={{ color: c.ink, textDecoration: 'underline', textUnderlineOffset: 3 }}>radius</a>.
        </p>
      </section>

      {/* ── INSTRUCTOR ──────────────────────────────────── */}
      <section style={{ ...S.container, paddingTop: 80, paddingBottom: 72 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 48, alignItems: 'flex-start' }}>
          <div>
            <PhotoSlot id="instructor-portrait" ratio="3/4" tone="sepia" placeholder="Drop portrait of Nev" />
          </div>
          <div>
            <div style={S.eyebrow}>INSTRUCTOR</div>
            <h2 style={{ ...S.h1, fontSize: 44, margin: '12px 0 8px' }}>{COPY.instructor.name}</h2>
            {COPY.instructor.bio.split('\n\n').map((para, i) =>
            <p
              key={i}
              style={{
                marginTop: i === 0 ? 20 : 14,
                marginBottom: 0,
                fontSize: 16,
                lineHeight: 1.55,
                color: c.ink,
                fontWeight: 400
              }}>
              
                {para}
              </p>
            )}

            {/* Subtle hand-drawn doodles — asymmetric cluster anchored to the right */}
            <div className="brk-bio-doodles" style={{ position: 'relative', marginTop: 56, height: 130 }}>
              {/* Bigger outline star, far right */}
              <svg
                viewBox="0 0 60 60"
                width="54"
                height="54"
                aria-hidden="true"
                style={{ position: 'absolute', top: 12, right: 8, color: c.accent, opacity: 0.6 }}>
                <path
                  d="M30,5 Q33,17 38,21 Q47,23 54,24 Q44,28 41,33 Q44,44 47,53 Q36,46 30,42 Q22,47 13,54 Q18,43 19,33 Q12,28 5,24 Q17,21 22,20 Q26,12 30,5 Z"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinejoin="round"
                  strokeLinecap="round"
                  transform="rotate(-14 30 30)" />
                
              </svg>

              {/* Small filled sparkle, mid-right */}
              <svg
                viewBox="0 0 30 30"
                width="22"
                height="22"
                aria-hidden="true"
                style={{ position: 'absolute', top: 78, right: 90, color: c.accent, opacity: 0.75 }}>
                <path
                  d="M15,3 Q16,12 18,14 Q24,15 27,15 Q21,17 18,17 Q16,22 15,27 Q14,20 13,17 Q8,16 3,15 Q10,14 13,13 Q14,9 15,3 Z"
                  fill="currentColor"
                  transform="rotate(16 15 15)" />
                
              </svg>

              {/* Tiny twinkle, top above star */}
              <svg
                viewBox="0 0 24 24"
                width="16"
                height="16"
                aria-hidden="true"
                style={{ position: 'absolute', top: -4, right: 76, color: c.accent, opacity: 0.55 }}>
                <path
                  d="M12,2 Q13,9 15,11 Q19,12 22,12 Q17,13 15,13 Q13,17 12,22 Q11,16 10,13 Q6,12 2,12 Q8,11 10,11 Q11,7 12,2 Z"
                  fill="currentColor"
                  transform="rotate(-8 12 12)" />
                
              </svg>

              {/* Wavy scribble, lower-right baseline */}
              <svg
                viewBox="0 0 200 18"
                width="140"
                height="14"
                aria-hidden="true"
                style={{ position: 'absolute', top: 96, right: 24, color: c.accent, opacity: 0.5 }}>
                <path
                  d="M3,9 Q18,2 36,9 Q54,16 72,9 Q90,2 108,9 Q126,16 144,9 Q162,2 180,9 Q190,12 197,9"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth="2"
                  strokeLinecap="round" />
                
              </svg>
            </div>
          </div>
        </div>
      </section>

      {/* ── NEIGHBORHOODS ───────────────────────────────── */}
      <section id="travel" style={{ background: c.bgSoft, padding: '72px 64px', scrollMarginTop: 24 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center' }}>
          <div>
            <div style={S.eyebrow}>Where we travel</div>
            <h2 style={{ ...S.h1, fontSize: 56, margin: '14px 0 24px' }}>Upper Bukit Timah & the neighbouring estates, door to door.</h2>
            <div style={{ fontSize: 15, lineHeight: 1.7, color: c.inkSoft, whiteSpace: 'nowrap' }}>
              <div>No transport fee within this list.</div>
              <div>Outside the radius - a flat $10-$15 fee per lesson applies.</div>
              <div>If you’re nearby but not listed, just ask!</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', columnGap: 20, rowGap: 14 }}>
            {COPY.neighborhoods.map((n) =>
            <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15, fontWeight: 500, paddingBottom: 10, borderBottom: `1px solid ${c.inkLine}` }}>
                <span style={{ width: 6, height: 6, borderRadius: 999, background: c.accent }} />
                {n}
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── FAQ ─────────────────────────────────────────── */}
      <section style={{ ...S.container, paddingTop: 48, paddingBottom: 80 }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 48 }}>
          <div>
            <div style={S.eyebrow}>Frequently asked</div>
            <h2 style={{ ...S.h1, fontSize: 36, margin: '12px 0 14px' }}>The usual questions.</h2>
            <p style={{ fontSize: 15, lineHeight: 1.55, color: c.inkSoft }}>
              Anything else? <a href="https://wa.me/6590117805" target="_blank" rel="noopener" style={{ color: c.ink, textDecoration: 'underline', textUnderlineOffset: 3 }}>Whatsapp to ask!</a>
            </p>
          </div>
          <div>
            {COPY.faq.map((f, i) =>
            <div key={f.q} style={{ borderTop: i === 0 ? `1px solid ${c.inkLine}` : 'none', borderBottom: `1px solid ${c.inkLine}`, padding: '24px 0' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                  <span style={{ fontFamily: '"JetBrains Mono", ui-monospace, monospace', fontSize: 11, color: c.accent, letterSpacing: '0.14em' }}>0{i + 1}</span>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontFamily: display, fontSize: 18, fontWeight: 600, letterSpacing: '-0.015em' }}>{f.q}</div>
                    <p style={{ marginTop: 8, fontSize: 14, lineHeight: 1.55, color: c.inkSoft, whiteSpace: 'pre-line' }}>{f.a}</p>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* ── FOOTER CTA ──────────────────────────────────── */}
      <section style={{ background: c.ink, color: c.cream, padding: '80px 64px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 60, alignItems: 'end' }}>
          <h2 style={{ ...S.h1, fontSize: 64, margin: 0, color: c.cream }}>
            Book your <em style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400, color: '#e6c87a' }}>$25</em> trial.
          </h2>
          <div>
            <div style={{ display: 'flex', gap: 12 }}>
              <button style={{ ...S.btnPrimary, background: '#e6c87a', color: c.ink }}>Book $25 trial →

              </button>
            </div>
          </div>
        </div>
        <hr style={{ ...S.rule, background: 'rgba(244,237,224,0.18)', margin: '56px 0 20px' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(244,237,224,0.55)', fontFamily: '"JetBrains Mono", ui-monospace, monospace', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          <div>© 2026  ·  Brooklyn Guitar Academy</div>
          <div>SINGAPORE</div>
        </div>
      </section>
    </div>);

}

// ── HERO subcomponent (3 layout variants) ─────────────────────────────────
function BrooklynHero({ variant, c, S, display }) {
  const Headline =
  <h1 style={{ ...S.h1, fontSize: 84, margin: 0, color: c.ink }}>
      Guitar lessons<br />
      <span style={{ display: 'inline-block', color: c.accent }}>
        in your <em style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>living&nbsp;room.</em>
      </span>
    </h1>;


  const Kicker =
  <div style={S.eyebrow}>{COPY.hero.kicker}</div>;


  const Sub =
  <p style={{ fontSize: 17, lineHeight: 1.5, color: 'rgba(26,23,20,0.72)', margin: 0, maxWidth: 520, whiteSpace: 'pre-line' }}>
      {COPY.hero.subhead}
    </p>;


  const CTAs =
  <div style={{ display: 'flex', gap: 12 }}>
      <a href="https://wa.me/6590117805" target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
        <button style={S.btnPrimary}>{COPY.hero.primaryCta} →</button>
      </a>
    </div>;


  if (variant === 'stacked') {
    return (
      <section style={{ padding: '80px 80px 100px' }}>
        {Kicker}
        <div style={{ marginTop: 16, marginBottom: 36 }}>{Headline}</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 48, alignItems: 'end' }}>
          <PhotoSlot id="hero-stacked" ratio="16/9" tone="crimson" placeholder="Drop hero photo" />
          <div style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
            {Sub}
            {CTAs}
            
          </div>
        </div>
      </section>);

  }

  if (variant === 'overlay') {
    return (
      <section style={{ padding: '40px 80px 80px' }}>
        <div style={{ position: 'relative', borderRadius: 0, overflow: 'hidden' }}>
          <PhotoSlot id="hero-overlay" ratio="21/9" tone="deep" placeholder="Drop hero photo" />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(120deg, rgba(10,6,6,0.78) 0%, rgba(10,6,6,0.25) 60%, transparent 100%)' }} />
          <div style={{ position: 'absolute', inset: 0, padding: '60px 60px', display: 'flex', flexDirection: 'column', justifyContent: 'flex-end' }}>
            <div style={{ ...S.eyebrow, color: '#e6c87a' }}>{COPY.hero.kicker}</div>
            <h1 style={{ ...S.h1, fontSize: 112, margin: '16px 0 28px', color: '#fbf6ec', maxWidth: 980 }}>
              Guitar lessons.<br />
              <span style={{ color: '#e6c87a' }}>In your <em style={{ fontFamily: '"Instrument Serif", serif', fontStyle: 'italic', fontWeight: 400 }}>living&nbsp;room.</em></span>
            </h1>
            <div style={{ maxWidth: 560, color: 'rgba(251,246,236,0.85)', fontSize: 18, lineHeight: 1.55, marginBottom: 28 }}>
              {COPY.hero.subhead}
            </div>
            <div style={{ display: 'flex', gap: 12 }}>
              <a href="https://wa.me/6590117805" target="_blank" rel="noopener" style={{ textDecoration: 'none' }}>
                <button style={{ ...S.btnPrimary, background: '#e6c87a', color: c.ink }}>{COPY.hero.primaryCta} →</button>
              </a>
            </div>
          </div>
        </div>
      </section>);

  }

  // default: split (text L, image R)
  return (
    <section className="brk-hero" style={{ padding: '32px 64px 56px', position: 'relative' }}>
      {/* ── Hand-drawn doodles scattered in the margins ───────────── */}
      {/* Big wobbly star, top-right */}
      <svg
        viewBox="0 0 60 60"
        width="56"
        height="56"
        className="brk-doodle" data-doodle="star"
        aria-hidden="true"
        style={{ position: 'absolute', top: 28, right: 56, color: c.accent, opacity: 0.85 }}>
        <path
          d="M30,5 Q33,17 38,21 Q47,23 54,24 Q44,28 41,33 Q44,44 47,53 Q36,46 30,42 Q22,47 13,54 Q18,43 19,33 Q12,28 5,24 Q17,21 22,20 Q26,12 30,5 Z"
          fill="none"
          stroke="currentColor"
          strokeWidth="2.2"
          strokeLinejoin="round"
          strokeLinecap="round"
          transform="rotate(-8 30 30)" />
        
      </svg>

      {/* Tiny twinkle, far top-left near kicker */}
      <svg
        viewBox="0 0 30 30"
        width="22"
        height="22"
        className="brk-doodle" data-doodle="twinkle"
        aria-hidden="true"
        style={{ position: 'absolute', top: 96, left: 36, color: c.accent, opacity: 0.7 }}>
        <path
          d="M15,3 Q16,12 18,14 Q24,15 27,15 Q21,17 18,17 Q16,22 15,27 Q14,20 13,17 Q8,16 3,15 Q10,14 13,13 Q14,9 15,3 Z"
          fill="currentColor"
          stroke="currentColor"
          strokeWidth="0.8"
          strokeLinejoin="round"
          transform="rotate(12 15 15)" />
        
      </svg>

      {/* Wavy scribble, mid-bottom-left under CTAs */}
      <svg
        viewBox="0 0 90 14"
        width="84"
        height="14"
        className="brk-doodle" data-doodle="scribble"
        aria-hidden="true"
        style={{ position: 'absolute', bottom: 80, left: 64, color: c.accent, opacity: 0.55 }}>
        <path
          d="M2,7 Q10,2 18,7 Q26,12 34,7 Q42,2 50,7 Q58,12 66,7 Q74,2 82,7 Q86,9 88,7"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round" />
        
      </svg>

      {/* Small sparkle, near bottom of hero photo */}
      <svg
        viewBox="0 0 40 40"
        width="30"
        height="30"
        className="brk-doodle" data-doodle="sparkle"
        aria-hidden="true"
        style={{ position: 'absolute', bottom: 36, right: '40%', color: c.accent, opacity: 0.75 }}>
        <path
          d="M20,4 Q21,15 23,18 Q31,19 36,20 Q28,22 23,22 Q21,30 20,36 Q19,28 17,22 Q12,21 4,20 Q13,18 17,18 Q19,12 20,4 Z"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.6"
          strokeLinejoin="round"
          strokeLinecap="round"
          transform="rotate(-15 20 20)" />
        
      </svg>

      <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 48, alignItems: 'center', width: '100%' }}>
        <div>
          {Kicker}
          <div style={{ marginTop: 12 }}>{Headline}</div>
          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 20 }}>
            {Sub}
            {CTAs}
          </div>
        </div>
        <PhotoSlot id="hero-split" ratio="1/1" tone="crimson" placeholder="Drop hero photo" />
      </div>
    </section>);

}

Object.assign(window, { LandingBrooklyn });