// Sales Page v2 — Direction 01 refined
// - Uses user-provided SVG assets for treble clef (trebleclef.svg) and stave (notation.svg)
// - Caveat handwritten font for "Dear Creative" and select impact lines
// - Real portrait of Josef, top-right of letter, text wraps around
// - Letter copy verbatim; no sign-off
// - Subtle watercolor-style blemishes in the background for depth

const TOKENS = {
  // Parchment — warmer, more "aged score paper"
  bg: '#ecdfc3', // parchment — hero/pivot/testimonials/guarantee
  bgWhite: '#f6efdd', // lighter parchment — letter/inside/stack/FAQ
  card: '#f2e7cd', // card surface
  cardWhite: '#faf4e4',

  // Espresso ink tones
  ink: '#1f1409', // espresso, primary text — darker
  body: '#2e2014', // body copy — much darker for contrast
  muted: '#665540', // muted captions — darker
  rule: '#cdbd9a', // score-line sepia
  ruleSoft: '#ddcfae',

  // Burnt sienna — inked emphasis
  accent: '#8a3a20',
  accentSoft: '#e8cdb4',
  accentInk: '#5a2212', // darker for strokes

  // Anchor — olive ink (the new color)
  olive: '#6b6a2a',
  oliveSoft: '#d8d4a5',

  serif: '"EB Garamond", "Cormorant Garamond", Georgia, serif',
  sans: '"DM Sans", -apple-system, sans-serif',
  script: '"Caveat", cursive'
};

// Treble clef — uses user-provided SVG as CSS mask so we can tint color
function TrebleClef({ height = 88, color = TOKENS.ink, opacity = 1, style = {} }) {
  // source: 95.116 × 153.12 → aspect 0.621
  const width = height * (95.116 / 153.12);
  return (
    <div
      aria-hidden
      style={{
        width, height,
        backgroundColor: color,
        WebkitMaskImage: "url('assets/trebleclef.svg')",
        maskImage: "url('assets/trebleclef.svg')",
        WebkitMaskSize: 'contain', maskSize: 'contain',
        WebkitMaskRepeat: 'no-repeat', maskRepeat: 'no-repeat',
        WebkitMaskPosition: 'center', maskPosition: 'center',
        opacity, display: 'inline-block',
        ...style
      }} />);


}

// Stave notation — user-provided SVG
function Notation({ width = 260, opacity = 1, style = {} }) {
  const height = width * (112 / 388);
  return (
    <img
      src="assets/notation.svg"
      aria-hidden
      style={{ width, height, opacity, display: 'block', ...style }} />);


}

// Soft watercolor blemish — gradient blob, subtle sheet-music ambience
function Blemish({ fill, opacity = 0.35, style = {} }) {
  return (
    <svg viewBox="0 0 400 400" style={{ position: 'absolute', pointerEvents: 'none', ...style }} aria-hidden>
      <defs>
        <radialGradient id={`wc-${fill.replace('#', '')}-${Math.round(opacity * 100)}`} cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor={fill} stopOpacity={opacity} />
          <stop offset="60%" stopColor={fill} stopOpacity={opacity * 0.45} />
          <stop offset="100%" stopColor={fill} stopOpacity="0" />
        </radialGradient>
      </defs>
      <path d="M 80 120 C 40 180 40 260 100 310 C 160 360 260 350 320 290 C 380 230 380 140 310 90 C 240 40 120 60 80 120 Z"
      fill={`url(#wc-${fill.replace('#', '')}-${Math.round(opacity * 100)})`} />
    </svg>);

}

// Decorative sheet-music fragment — uses any SVG under /assets.
// Pass `n={1-9}` for bgmusic stave fragments, or `src="bassclef"` etc for single glyphs.
// Placed in margins only; faint, slightly rotated, non-interactive.
function SheetFrag({
  n,
  src,
  width = 280,
  rotate = -4,
  opacity = 0.14,
  dark = false,
  style = {}
}) {
  const filename = src || `bgmusic${n || 1}`;
  return (
    <img
      src={`assets/${filename}.svg`}
      aria-hidden
      style={{
        position: 'absolute',
        width, height: 'auto',
        opacity,
        transform: `rotate(${rotate}deg)`,
        pointerEvents: 'none',
        userSelect: 'none',
        // Invert to pale on dark sections so the black strokes become faint light strokes
        filter: dark ? 'invert(1) brightness(0.85)' : 'none',
        ...style
      }} />);


}

function VimeoEmbed({ id = '1166726008', radius = 8 }) {
  return (
    <div style={{
      position: 'relative', width: '100%', paddingTop: '56.25%',
      borderRadius: radius, overflow: 'hidden',
      background: '#0e0b0a',
      boxShadow: '0 30px 80px -30px rgba(40,30,20,0.5), 0 10px 24px -12px rgba(40,30,20,0.3)'
    }}>
      <iframe
        src={`https://player.vimeo.com/video/${id}?badge=0&autopause=0&player_id=0&app_id=58479`}
        frameBorder="0"
        allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        title="Bach's Prelude In C Major — Performance"
        style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', border: 'none' }} />
      
    </div>);

}

function VideoPlaceholder({ radius = 8 }) {
  return <VimeoEmbed radius={radius} />;
}

function Hero() {
  return (
    <section data-sp-section="hero" style={{
      background: TOKENS.bg, color: TOKENS.ink,
      padding: '44px 72px 56px', fontFamily: TOKENS.sans,
      position: 'relative', overflow: 'hidden', borderRadius: "0px"
    }}>
      {/* background blemishes — subtle */}
      <Blemish fill="#e8c9b4" opacity={0.32} style={{ width: 700, height: 700, top: -220, left: -260 }} />
      <Blemish fill="#d9cfb8" opacity={0.35} style={{ width: 560, height: 560, bottom: -220, right: -180 }} />
      <Blemish fill="#e5d8c1" opacity={0.22} style={{ width: 420, height: 420, top: 500, left: -120 }} />

      {/* Faint decorative treble clef in left margin, balancing the stave top-right */}
      <div data-sp-decor>
      <TrebleClef height={140} color={TOKENS.ink} opacity={0.07} style={{ position: 'absolute', top: 340, left: 56, transform: 'rotate(-6deg)', pointerEvents: 'none' }} />
      </div>

      {/* Sheet-music fragment in lower-right margin */}
      <div data-sp-decor>
      <SheetFrag n={5} width={300} rotate={7} opacity={0.09} style={{ bottom: 80, left: 40 }} />
      </div>

      {/* notation stave — top right */}
      <div data-sp-decor className="sp-drift" style={{ position: 'absolute', top: 20, right: 36 }}>
        <div className="sp-pulse">
          <Notation width={200} />
        </div>
      </div>

      {/* eyebrow */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, justifyContent: 'center', marginBottom: 22, marginTop: 40, position: 'relative' }}>
        <div style={{ width: 28, height: 1, background: TOKENS.accent }} />
        <div data-sp-eyebrow style={{ fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: TOKENS.accent, fontWeight: 500 }}>
          Bach's Prelude in C Major
        </div>
        <div style={{ width: 28, height: 1, background: TOKENS.accent }} />
      </div>

      <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <h1 data-sp-h1 style={{
          fontFamily: TOKENS.serif, fontWeight: 400,
          fontSize: 68, lineHeight: 1.04, letterSpacing: -1,
          margin: '0 0 24px', color: TOKENS.ink, textWrap: 'pretty'
        }}>
          Learn Bach's <em style={{ fontStyle: 'italic', color: TOKENS.accent }}>Prelude in C</em> In A Way That Feels Musical, Clear, <span style={{ fontStyle: 'italic' }}>And Deeply Satisfying</span>
        </h1>

        <p data-sp-lead style={{
          fontSize: 18, lineHeight: 1.65, color: TOKENS.body,
          maxWidth: 660, margin: '0 auto 40px'
        }}>
          I'll guide you through this beautiful piece step-by-step with my clear, calm lessons that do more than simply teach you the notes. You'll also build flow and musicality as you go so the piece starts to feel as good to play as it sounds in your head.
        </p>

        <div data-sp-script style={{ fontFamily: TOKENS.script, fontSize: 26, color: TOKENS.body, marginBottom: 12 }}>
          Let's take a quick listen to this beautiful piece first...
        </div>
        <div style={{ maxWidth: 680, margin: '0 auto 40px' }}>
          <VideoPlaceholder />
        </div>

        <div data-sp-price style={{ fontFamily: TOKENS.serif, fontSize: 22, lineHeight: 1.45, color: TOKENS.ink, marginBottom: 4 }}>
          Get The Full Bach's Prelude in C Course Today
        </div>
        <div data-sp-price style={{ fontFamily: TOKENS.serif, fontSize: 22, fontStyle: 'italic', color: TOKENS.accent, marginBottom: 24 }}>
          For A Single Payment of Just $67!
        </div>

        <window.SP_BigCta>Join the Piece Study</window.SP_BigCta>
        <div style={{ fontSize: 13, letterSpacing: '0.08em', color: TOKENS.muted, marginTop: 16 }}>
          One-Time Cost  ·  Lifetime Access  ·  30-Day Guarantee
        </div>
      </div>

    </section>);

}

function Portrait({ size = 160 }) {
  return (
    <div style={{ textAlign: 'center' }}>
      <div data-sp-portrait style={{
        width: size, height: size, borderRadius: '50%',
        background: `url('assets/josef-portrait.png') center / cover no-repeat`,
        boxShadow: `0 0 0 6px ${TOKENS.accentSoft}`,
        margin: '0 auto 14px'
      }} />
      <div style={{
        fontFamily: TOKENS.serif, fontSize: 13,
        letterSpacing: '0.2em', textTransform: 'uppercase',
        color: TOKENS.accent, fontWeight: 600
      }}>
        A Note From Josef
      </div>
    </div>);

}

function Letter() {
  const P = (props) =>
  <p data-sp-body style={{ fontSize: 17, lineHeight: 1.75, color: TOKENS.body, margin: '0 0 22px', ...(props.style || {}) }}>
      {props.children}
    </p>;

  const Sub = ({ children }) =>
  <h3 data-sp-h3 style={{
    fontFamily: TOKENS.serif, fontWeight: 500,
    fontSize: 28, lineHeight: 1.3, color: TOKENS.ink,
    margin: '16px 0 20px'
  }}>{children}</h3>;


  return (
    <section data-sp-section="letter" style={{
      background: TOKENS.bgWhite, padding: '72px 60px 96px',
      fontFamily: TOKENS.sans, position: 'relative', overflow: 'hidden'
    }}>
      {/* subtle blemishes behind letter */}
      <Blemish fill="#efe6d4" opacity={0.22} style={{ width: 560, height: 560, top: 120, left: -240 }} />
      <Blemish fill="#f0dfcf" opacity={0.14} style={{ width: 520, height: 520, top: 700, right: -220 }} />
      <Blemish fill="#ece3cd" opacity={0.16} style={{ width: 520, height: 520, bottom: -200, left: 40 }} />

      {/* Decorative sheet fragments in outer margins */}
      <div data-sp-decor>
      <SheetFrag n={2} width={260} rotate={-9} opacity={0.1} style={{ top: 160, right: 30 }} />
      <SheetFrag n={6} width={280} rotate={5} opacity={0.08} style={{ bottom: 240, left: 24 }} />
      <SheetFrag src="fermenta" width={160} rotate={-4} opacity={0.08} style={{ top: 260, left: 40 }} />
      </div>

      <h2 data-sp-h2 style={{
        fontFamily: TOKENS.serif, fontWeight: 400,
        fontSize: 40, lineHeight: 1.2, color: TOKENS.ink,
        letterSpacing: -0.4, textWrap: 'pretty', textAlign: 'center',
        maxWidth: 820, margin: '0 auto 56px', position: 'relative'
      }}>
        There's a reason this piece can feel so rewarding... and so frustrating.
      </h2>

      <article data-sp-card style={{
        maxWidth: 780, margin: '0 auto',
        background: TOKENS.card,
        padding: '72px 72px 80px',
        boxShadow: '0 1px 0 rgba(0,0,0,0.04), 0 20px 60px -20px rgba(40,30,20,0.12)',
        borderRadius: 3,
        position: 'relative'
      }}>
        {/* Floated portrait — top-right, text wraps around */}
        <div data-sp-letter-portrait style={{
          float: 'right',
          margin: '8px 0 20px 32px',
          shapeOutside: 'circle(52%)',
          width: 180
        }}>
          <Portrait size={160} />
        </div>

        {/* Salutation — handwritten */}
        <div data-sp-script style={{
          fontFamily: TOKENS.script, fontWeight: 500,
          fontSize: 56, color: TOKENS.ink, lineHeight: 1,
          marginBottom: 28
        }}>
          Dear Creative,
        </div>

        {/* First paragraph with drop cap */}
        <p data-sp-body style={{ fontSize: 17, lineHeight: 1.75, color: TOKENS.body, margin: '0 0 22px' }}>
          <span data-sp-dropcap style={{
            float: 'left', fontFamily: TOKENS.serif, fontSize: 68,
            lineHeight: 0.9, marginRight: 12, marginTop: 6, marginBottom: -4,
            color: TOKENS.accent, fontWeight: 400
          }}>I</span>
          f you've loved Bach's Prelude in C for a long time, or always had that quiet feeling that one day you'd love to really sit down and play it... I created this piece study for you.
        </p>

        <P>And if you've already had a go at it, but it doesn't quite feel right or sound the way you want it to... it's for you too.</P>

        {/* Handwritten impact line */}
        <div data-sp-pullquote style={{
          fontFamily: TOKENS.script, fontWeight: 500,
          fontSize: 40, lineHeight: 1.15, color: TOKENS.accent,
          textAlign: 'center', margin: '40px 0'
        }}>
          Because this isn't just another piece.
        </div>

        <P>It's one we can already love before we play a single note of it... and that's why learning it can feel so rewarding, but also frustrating at the same time.</P>

        <P style={{ fontStyle: 'italic', color: TOKENS.ink }}>
          With a piece this beautiful and meaningful, we want to feel like we are doing it justice.
        </P>

        <P>And for that, it needs to feel right when we play it. We want to feel good about the sound coming from our fingers, rather than just sort of hanging on and hoping for the best.</P>

        <P>And I think that's why you may see a number of performances out there that just don't sound quite right somehow.</P>

        <P>Because Prelude in C can look quite approachable on the surface... and it is. It's a wonderful, manageable piece, even if you're not all that far along yet.</P>

        <P>But once you actually sit down to learn it, you start to discover...</P>

        <Sub>There's a lot more depth here behind those notes.</Sub>

        <P>There's the smoothness and flow, the shaping of the phrases, and the musical expression that give this piece the beautiful sound we know and love.</P>

        <P>And if that sounds like a lot right now...</P>

        {/* Handwritten impact */}
        <div data-sp-pullquote style={{
          fontFamily: TOKENS.script, fontWeight: 500,
          fontSize: 48, lineHeight: 1.1, color: TOKENS.accent,
          margin: '28px 0 32px'
        }}>
          Then don't worry.
        </div>

        <P>It's why I designed this course to guide you through the piece bar by bar in a way that feels clear, manageable, and steady... so you always know what to focus on next.</P>

        <P>But alongside that, I'll also show you gentle, practical ways to shape it musically as you go, so that side of the playing does not feel like some mysterious, out-of-reach add-on.</P>

        <P>And that's the reassuring part...</P>

        <P>Learning the notes, and feeling good about the way they sound under your fingers, can feel far more achievable than it looks from the outside.</P>

        {/* Transition */}
        <div style={{
          clear: 'both',
          marginTop: 56, paddingTop: 40,
          borderTop: `1px solid ${TOKENS.rule}`,
          textAlign: 'center'
        }}>
          <div data-sp-h3 style={{
            fontFamily: TOKENS.serif, fontStyle: 'italic',
            fontSize: 28, lineHeight: 1.35, color: TOKENS.accent,
            marginBottom: 28
          }}>
            That's what this piece study is here to give you...
          </div>
          <p data-sp-lead style={{
            fontFamily: TOKENS.serif, fontStyle: 'italic',
            fontSize: 18, lineHeight: 1.6, color: TOKENS.body,
            maxWidth: 560, margin: '0 auto'
          }}>
            a clear, enjoyable way into Prelude in C, so it feels manageable as you learn it and deeply satisfying as it starts to come together under your fingers.
          </p>
        </div>
      </article>
    </section>);

}

// Placeholder for an annotated score fragment. Shows where the real image will go,
// communicates aspect ratio and intent for each beat.
// HANDOFF: pass `src="path/to/fragment.jpg"` to swap in a real score image.
function ScoreFragmentPlaceholder({ label, hint, src, alt = '' }) {
  if (src) {
    return (
      <img src={src} alt={alt}
      style={{ width: '100%', aspectRatio: '5 / 2', objectFit: 'cover', borderRadius: 2, display: 'block' }} />);

  }
  return (
    <div data-placeholder="true" data-placeholder-kind="score-fragment" data-placeholder-hint={hint} style={{
      width: '100%',
      aspectRatio: '5 / 2',
      background: 'rgba(255,255,255,0.55)',
      border: `1px dashed ${TOKENS.rule}`,
      borderRadius: 2,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      padding: 20, textAlign: 'center',
      position: 'relative', overflow: 'hidden'
    }}>
      {/* faint staff lines to suggest sheet music */}
      <div style={{ position: 'absolute', inset: '38% 14% auto 14%', display: 'flex', flexDirection: 'column', gap: 6, opacity: 0.35 }}>
        {[0, 1, 2, 3, 4].map((i) =>
        <div key={i} style={{ height: 1, background: TOKENS.muted }} />
        )}
      </div>
      <div style={{
        fontFamily: TOKENS.sans, fontSize: 10, letterSpacing: '0.18em',
        textTransform: 'uppercase', color: TOKENS.muted, fontWeight: 600,
        position: 'relative', marginBottom: 6
      }}>
        Score fragment · placeholder
      </div>
      <div style={{
        fontFamily: TOKENS.serif, fontStyle: 'italic', fontSize: 15,
        color: TOKENS.body, maxWidth: 280, lineHeight: 1.4, position: 'relative'
      }}>
        {hint}
      </div>
    </div>);

}

function BeatCard({ number, title, body, hint, cardBg }) {
  return (
    <div data-sp-card style={{
      background: cardBg,
      padding: '32px 30px 36px',
      boxShadow: '0 1px 0 rgba(0,0,0,0.04), 0 20px 60px -20px rgba(40,30,20,0.14)',
      borderRadius: 3,
      display: 'flex', flexDirection: 'column'
    }}>
      <ScoreFragmentPlaceholder hint={hint} />
      <div style={{
        display: 'flex', alignItems: 'baseline', gap: 14,
        marginTop: 28, marginBottom: 14
      }}>
        <span style={{
          fontFamily: TOKENS.serif, fontWeight: 500,
          fontSize: 34, color: TOKENS.accent, lineHeight: 1,
          letterSpacing: -1
        }}>
          {number}
        </span>
        <span style={{ flex: 1, height: 1, background: TOKENS.rule }} />
      </div>
      <h3 data-sp-h3 style={{
        fontFamily: TOKENS.serif, fontWeight: 500,
        fontSize: 24, lineHeight: 1.2, color: TOKENS.ink,
        margin: '0 0 14px', letterSpacing: -0.2
      }}>
        {title}
      </h3>
      <p data-sp-body style={{
        fontFamily: TOKENS.sans, fontSize: 15.5, lineHeight: 1.7,
        color: TOKENS.body, margin: 0
      }}>
        {body}
      </p>
    </div>);

}

const PIVOT_BG = '#f6f1e4'; // warm off-white — distinct chapter break

function Pivot() {
  const PIVOT_CARD = '#ffffff'; // white cards for contrast on cream bg
  return (
    <section data-sp-section="pivot" style={{
      background: `linear-gradient(180deg, ${TOKENS.bgWhite} 0, ${PIVOT_BG} 160px)`,
      padding: '96px 60px 104px',
      fontFamily: TOKENS.sans, position: 'relative', overflow: 'hidden'
    }}>
      {/* very subtle blemishes, cooler tones to match the lighter ground */}
      <Blemish fill="#e8e0cf" opacity={0.35} style={{ width: 620, height: 620, top: -160, right: -240 }} />
      <Blemish fill="#ead9c6" opacity={0.22} style={{ width: 520, height: 520, bottom: -180, left: -200 }} />

      {/* Sheet fragment in left margin */}
      <div data-sp-decor>
      <SheetFrag n={4} width={240} rotate={-7} opacity={0.09} style={{ top: 80, left: 30 }} />
      <SheetFrag src="bassclef" width={130} rotate={5} opacity={0.08} style={{ bottom: 160, right: 40 }} />
      </div>

      {/* Opening turn — serif upright, centered */}
      <div style={{
        maxWidth: 720, margin: '0 auto 64px',
        textAlign: 'center', position: 'relative'
      }}>
        <p data-sp-h3 style={{
          fontFamily: TOKENS.serif, fontWeight: 400,
          fontSize: 30, lineHeight: 1.35, color: TOKENS.ink,
          margin: 0, letterSpacing: -0.3, textWrap: 'pretty'
        }}>
          I've built this course around the way I think a piece like this needs to be learnt...
        </p>
      </div>

      {/* Three beats, side by side */}
      <div data-sp-grid-3 style={{
        maxWidth: 1180, margin: '0 auto',
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 28,
        position: 'relative'
      }}>
        <BeatCard
          cardBg={PIVOT_CARD}
          number="01"
          title="Structured And Manageable Sections"
          body="We break the piece down and I guide you steadily through the notes in a clear, sensible order so you can stay focused and never feel overwhelmed."
          hint="A measure of the score with bar lines emphasized and a section bracket above — communicates ‘broken into manageable chunks.’" />
        
        <BeatCard
          cardBg={PIVOT_CARD}
          number="02"
          title="Making The Notes Sound Musical"
          body="Whilst you learn the notes, I'll also show you practical ways to shape and smooth out your sound so it feels less flat or mechanical, and more flowing, beautiful, and musical."
          hint="The same notes with a hand-drawn phrase arc/slur swooping over them, plus a small dynamic marking — communicates ‘shaping the line.’" />
        
        <BeatCard
          cardBg={PIVOT_CARD}
          number="03"
          title="Practical And Friendly Lessons"
          body="My goal is to help you get that satisfying, musical result in a way that feels natural and encouraging, without turning the whole thing into some rigid, overly academic exercise."
          hint="A measure with a handwritten margin annotation in warm red — like a teacher's pencil note beside the staff. Friendly, human, specific." />
        
      </div>

      {/* Bridge — handwritten */}
      <div style={{
        maxWidth: 720, margin: '72px auto 0',
        textAlign: 'center', position: 'relative'
      }}>
        <div data-sp-handoff style={{
          fontFamily: TOKENS.script, fontWeight: 500,
          fontSize: 32, lineHeight: 1.3, color: TOKENS.ink,
          textWrap: 'pretty'
        }}>
          And to make all this easier, here's the clear path through the piece from start to finish...
        </div>
      </div>
    </section>);

}

function App() {
  return (
    <div style={{ background: TOKENS.bg, minHeight: '100vh' }}>
      <Hero />
      <Letter />
      <div aria-hidden="true" style={{
        position: 'relative', height: 0, zIndex: 2, pointerEvents: 'none',
      }}>
        <img src="assets/divider.svg" alt="" style={{
          position: 'absolute', left: '50%', top: 0,
          transform: 'translate(-50%, -50%)',
          width: 'min(250px, 72%)', height: 'auto',
          opacity: 0.5, display: 'block',
        }} />
      </div>
      <Pivot />
      <div aria-hidden="true" style={{
        position: 'relative', height: 0, width: '100%',
        zIndex: 2, pointerEvents: 'none',
      }}>
        <div style={{
          position: 'absolute', left: 0, right: 0, top: 0,
          height: 1, background: TOKENS.ruleSoft,
        }} />
        <svg width="96" height="30" viewBox="0 0 96 30" fill="none" style={{
          position: 'absolute', left: '50%', top: 0,
          transform: 'translateX(-50%)', display: 'block', overflow: 'visible',
        }}>
          <path d="M0 0 L48 28 L96 0" fill={PIVOT_BG}
            stroke={TOKENS.ruleSoft} strokeWidth="1" strokeLinejoin="round" />
        </svg>
      </div>
      <window.SP_Section4 />
      <window.SP_Section5 />
      <window.SP_Section6 />
      <window.SP_Section7 />
      <window.SP_Section8 />
      <window.SP_Section9 />
      <window.SP_Section10 />
    </div>);

}

// Expose tokens + Blemish for the sections file
window.SP_TOKENS = TOKENS;
window.SP_Blemish = Blemish;
window.SP_SheetFrag = SheetFrag;
window.SP_TrebleClef = TrebleClef;

ReactDOM.createRoot(document.getElementById('root')).render(<App />);