// shared-brooklyn.jsx — SG-localized COPY + brand helpers for Brooklyn (Hillview).

const COPY = {
  brand: 'Brooklyn',
  brandShort: 'BK',
  location: 'Hillview · Singapore',

  navLinks: ['Lessons', 'Pricing', 'About', 'FAQ'],

  hero: {
    kicker: 'Private guitar lessons for kids & adults',
    headline1: 'Guitar lessons.',
    headline2: 'In your living room.',
    subhead:
    'We come to you across Upper Bukit Timah and Singapore.\nPatient teaching, steady progress, and exam prep if you opt for it.',
    primaryCta: 'Book $25 trial',
    proof: 'Lessons with Experienced Teacher & Active Musician.'
  },

  steps: [
  {
    n: '01',
    title: 'Tell us about you',
    body:
    "Two-minute form: age, any experience, and what you're hoping to play. We reply within a day."
  },
  {
    n: '02',
    title: 'We come to you',
    body:
    "Your instructor arrives with everything they need. We bring a loaner guitar for the trial \u2014 you're welcome to sit in."
  },
  {
    n: '03',
    title: 'Weekly progress',
    body:
    "A curriculum built around the music you actually want to play. A short WhatsApp note after every lesson so you know where we are."
  }],


  audience: [
  {
    tag: 'Ages 6–9',
    title: 'First chords, first songs',
    body:
    'Patient pacing. Practice that still feels like play. Most kids this age learn best in shorter sessions.'
  },
  {
    tag: 'Ages 10–13',
    title: 'Technique, theory & exams if you want it',
    body:
    'Foundations that hold up under a busy school week. Trinity and Rockschool prep on request \u2014 never by default.'
  },
  {
    tag: 'Ages 14+',
    title: 'Songs that matter',
    body:
    "Repertoire chosen together. If a school showcase, open mic, or audition comes up, we'll help you get ready for it."
  }],


  styles: [
  'Acoustic',
  'Electric',
  'Folk',
  'Rock',
  'Indie',
  'Blues',
  'Pop',
  'Trinity / Rockschool prep',
  'Songwriting',
  'Audition pieces'],


  neighborhoods: [
  'Upper Bukit Timah',
  'Hume',
  'Hillview',
  'Beauty World',
  'King Albert Park',
  'Bukit Panjang',
  'Cashew',
  'Sixth Avenue'],


  pricing: [
  {
    label: '30 min',
    price: 'S$180',
    sub: '4 lessons / month  ·  ages 6–9 only',
    bullets: [
    'Weekly 30-min lesson at home',
    'Best pace for under-10 attention spans',
    'Loaner guitar available']

  },
  {
    label: '45 min',
    price: 'S$220',
    sub: '4 lessons / month  ·  teens & adults',
    featured: true,
    bullets: [
    'Weekly 45-min lesson at home',
    'Curriculum built around your songs',
    'Trinity / Rockschool prep on request']

  },
  {
    label: '60 min +',
    price: "Let's talk",
    sub: 'graded students & deeper goals',
    bullets: [
    'Often the right fit for grade-exam students',
    'Or anyone working toward a specific audition piece',
    'Quoted on enquiry']

  }],


  faq: [
  {
    q: 'Do we need to own a guitar?',
    a:
    "You'll ideally want to have your own guitar to practice with. Don't worry though, even a basic, affordable one works great for learning!"
  },
  {
    q: 'How young can my child start?',
    a:
    'We start most kids at 6. Younger than that, attention span and physical size are usually the bottleneck. We offer a $25 trial lesson to find out together.'
  },
  {
    q: 'Do you prepare students for graded exams?',
    a:
    'Yes - on request. Trinity and Rockschool are most popular. For kids especially, we can also follow a graded exam syllabus as a structured curriculum and decide later whether to actually sit the exam.'
  },
  {
    q: 'What if we need to reschedule?',
    a:
    'With more than 24 hours\u2019 notice, the lesson is rescheduled and not deducted from your package.\nLast-minute cancellations are charged in full.'
  }],


  instructor: {
    name: 'Nev',
    title: 'Guitar Instructor',
    bio:
    "Nev has taught guitar in Singapore for years - in schools and privately, from kids to adults. Alongside teaching, he’s an actively gigging guitarist, recording artist, and producer, and runs a guitar YouTube channel with around 6 million views.\n\nWith deep range across styles, lessons are tailored to what each student actually wants to play - fun, practical, and grounded in the music that matters to them.",
    quote:
    "“My job is to make sure practice doesn’t feel like homework. If a kid wants to come back to the guitar next week, the rest tends to follow.”"
  },

  footer: {
    cta: 'Book a $25 trial lesson',
    sub: 'Twenty minutes. S$25.',
    contact: '+65 8888 4321'
  }
};

// ─── Duotone photo placeholder ───────────────────────────────────────────
function DuotonePhoto({
  label = 'photo',
  ratio = '4/3',
  tone = 'crimson',
  align = 'bl',
  rounded = 0,
  style = {},
  children
}) {
  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;
  const aligns = {
    bl: { alignItems: 'flex-end', justifyContent: 'flex-start' },
    br: { alignItems: 'flex-end', justifyContent: 'flex-end' },
    tl: { alignItems: 'flex-start', justifyContent: 'flex-start' },
    tr: { alignItems: 'flex-start', justifyContent: 'flex-end' },
    center: { alignItems: 'center', justifyContent: 'center' }
  };
  return (
    <div
      style={{
        position: 'relative',
        aspectRatio: ratio,
        width: '100%',
        height: ratio === 'auto' ? '100%' : undefined,
        borderRadius: rounded,
        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%)
        `,
        display: 'flex',
        padding: 14,
        color: 'rgba(255,255,255,0.78)',
        fontFamily: '"JetBrains Mono", ui-monospace, monospace',
        fontSize: 10.5,
        letterSpacing: '0.1em',
        textTransform: 'uppercase',
        ...aligns[align],
        ...style
      }}>
      
      {children}
      {label &&
      <span
        style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 7,
          padding: '4px 8px',
          background: 'rgba(0,0,0,0.32)',
          borderRadius: 999,
          backdropFilter: 'blur(4px)'
        }}>
          
          <span style={{ width: 6, height: 6, borderRadius: 999, background: '#fff', opacity: 0.85 }} />
          {label}
        </span>
      }
    </div>);

}

// ─── Brooklyn brand mark ────────────────────────────────────────────────
function BrandMark({ size = 36, fg = '#1a1714', bg = 'transparent', stroke = 1.4 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" aria-label="Brooklyn">
      <circle cx="20" cy="20" r="19" fill={bg} stroke={fg} strokeWidth={stroke} />
      <circle cx="20" cy="22" r="6.5" fill="none" stroke={fg} strokeWidth={stroke} />
      <line x1="13.5" y1="9" x2="13.5" y2="34" stroke={fg} strokeWidth={stroke * 0.6} />
      <line x1="16.8" y1="9" x2="16.8" y2="34" stroke={fg} strokeWidth={stroke * 0.6} />
    </svg>);

}

// ─── Wordmark — "BROOKLYN" with HILLVIEW · SG subline ───────────────────
function Wordmark({ color = '#1a1714', size = 16, weight = 700, letterSpacing = '0.22em' }) {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
      <div
        style={{
          color,
          fontFamily: '"Archivo", system-ui, sans-serif',
          fontWeight: weight,
          fontSize: size,
          letterSpacing,
          textTransform: 'uppercase',
          lineHeight: 1
        }}>BROOKLYN GUITAR ACADEMY


      </div>
      <div
        style={{
          color,
          opacity: 0.65,
          fontFamily: '"JetBrains Mono", ui-monospace, monospace',
          fontSize: Math.max(11, size * 0.78),
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          lineHeight: 1
        }}>UPPER BUKIT TIMAH · SINGAPORE


      </div>
    </div>);

}

function StarMark({ size = 14, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 20 20" aria-hidden>
      <path
        d="M10 0 L11.2 8.8 L20 10 L11.2 11.2 L10 20 L8.8 11.2 L0 10 L8.8 8.8 Z"
        fill={color} />
      
    </svg>);

}

Object.assign(window, { COPY, DuotonePhoto, BrandMark, Wordmark, StarMark });