// kit-app.jsx — assembles the full Coco Tide brand kit
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#FF8A3D",
  "wordFont": "Space Grotesk",
  "cover": "reversed"
}/*EDITMODE-END*/;
const ACCENTS = ['#FF8A3D', '#FF6F59', '#B6E03C', '#1AA294'];
const C = window.CT;

/* ---- nav ---- */
const NAV = [
  ['01', 'Brand', 's-brand'], ['02', 'Logo', 's-marks'], ['03', 'Lockups', 's-lockups'],
  ['04', 'Clear space', 's-clear'], ['05', 'Misuse', 's-misuse'], ['06', 'Color', 's-color'],
  ['07', 'Type', 's-type'], ['08', 'Pattern', 's-pattern'], ['09', 'Mono', 's-mono'],
  ['10', 'Collateral', 's-collateral'], ['11', 'Principles', 's-why'],
];

function TopBar() {
  return (
    <div data-printhide="1" style={{ position: 'sticky', top: 0, zIndex: 20, background: 'rgba(239,233,220,0.86)',
      backdropFilter: 'blur(10px)', borderBottom: '1px solid rgba(12,63,58,0.1)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        padding: '14px clamp(20px,5vw,72px)', gap: 16 }}>
        <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontWeight: 700, letterSpacing: '0.16em', fontSize: 14, color: KIT.INK }}>COCO TIDE</span>
        <div style={{ display: 'flex', gap: 4, flexWrap: 'wrap', justifyContent: 'flex-end' }}>
          {NAV.map(([n, label, id]) => (
            <a key={id} href={`#${id}`} style={{ fontFamily: "'Outfit', sans-serif", fontSize: 12.5,
              color: KIT.MUTE, textDecoration: 'none', padding: '5px 9px', borderRadius: 7 }}
              onMouseEnter={(e) => { e.currentTarget.style.background = 'rgba(12,63,58,0.07)'; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = 'transparent'; }}>{label}</a>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---- cover ---- */
function Cover({ rev }) {
  return (
    <div style={{ background: rev ? C.ink : C.cream, padding: '94px 24px 104px', position: 'relative', overflow: 'hidden',
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 38 }}>
      <div style={{ position: 'absolute', inset: 0, opacity: 0.5,
        background: rev ? 'radial-gradient(70% 60% at 50% 120%, rgba(26,162,148,0.35), transparent)'
                        : 'radial-gradient(70% 60% at 50% 120%, rgba(231,217,188,0.6), transparent)' }} />
      <div style={{ zIndex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 34 }}>
        <Eyebrow color={rev ? 'rgba(231,217,188,0.7)' : KIT.GOLD}>Brand Kit · Hulhumalé · Maldives</Eyebrow>
        <Badge s={300} reversed={rev} />
        <div style={{ height: 1, width: 60, background: 'var(--ct-accent)' }} />
        <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 17, letterSpacing: '0.04em',
          color: rev ? 'rgba(247,241,228,0.82)' : KIT.MUTE, maxWidth: 440, textAlign: 'center' }}>
          The complete visual identity system — where the ocean meets the city.
        </div>
      </div>
    </div>
  );
}

/* ---- swatch with role + hex ---- */
function Swatch({ name, hex, role, tweak }) {
  const light = ['#F7F1E4', '#E7D9BC', '#7FCFC3'].includes(hex);
  return (
    <div style={{ flex: '1 1 150px', minWidth: 150, borderRadius: 14, overflow: 'hidden', border: '1px solid rgba(12,63,58,0.1)' }}>
      <div style={{ height: 104, background: tweak ? 'var(--ct-accent)' : hex }} />
      <div style={{ padding: '13px 15px', background: '#fff' }}>
        <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 14.5, fontWeight: 600, color: '#1a3b36' }}>{name}</div>
        <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 12.5, color: '#8a9089', textTransform: 'uppercase', fontVariantNumeric: 'tabular-nums', marginTop: 1 }}>
          {tweak ? 'tweakable' : hex}
        </div>
        <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 11.5, color: KIT.FAINT, marginTop: 6 }}>{role}</div>
      </div>
    </div>
  );
}

/* ---- type scale row ---- */
function TypeRow({ label, size, weight, font, sample }) {
  return (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 20, padding: '16px 0', borderTop: '1px solid rgba(12,63,58,0.08)' }}>
      <span style={{ width: 120, flexShrink: 0, fontFamily: "'Outfit', sans-serif", fontSize: 12.5, color: KIT.FAINT }}>{label}</span>
      <span style={{ flex: 1, fontFamily: font, fontSize: size, fontWeight: weight, color: KIT.INK2, lineHeight: 1.1, letterSpacing: size > 40 ? '-0.01em' : 0 }}>{sample}</span>
      <span style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 12, color: 'var(--ct-accent)', fontVariantNumeric: 'tabular-nums' }}>{size}px · {weight}</span>
    </div>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {
    const r = document.documentElement.style;
    r.setProperty('--ct-accent', t.accent);
    r.setProperty('--ct-word', `'${t.wordFont}', sans-serif`);
  }, [t.accent, t.wordFont]);
  const rev = t.cover === 'reversed';

  return (
    <div style={{ fontFamily: "'Outfit', sans-serif", color: KIT.INK2, background: KIT.PAPER }}>
      <TopBar />
      <Cover rev={rev} />

      {/* 01 brand */}
      <Section id="s-brand" k="01" title="The brand"
        kicker="Coco Tide is a beachside chill-out on the white sand of Hulhumalé — urban energy, ocean calm. The identity is built to be effortlessly cool and endlessly photogenic.">
        <Grid min={240} gap={30}>
          {[
            ['Tagline', 'Where ocean meets city', 'The one line that anchors everything — calm, confident, place-specific.'],
            ['Voice', 'Easy, not try-hard', 'Short, warm, lowercase-friendly. We invite, we don’t shout. Coastal, never corporate.'],
            ['Feeling', 'Salt air & good light', 'Sun on skin, cold drink, slow afternoon. Every touchpoint should feel like that.'],
          ].map(([h, big, b]) => (
            <div key={h}>
              <div style={{ width: 30, height: 4, borderRadius: 2, background: 'var(--ct-accent)', marginBottom: 16 }} />
              <Eyebrow>{h}</Eyebrow>
              <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 21, fontWeight: 600, color: KIT.INK2, margin: '10px 0 8px' }}>{big}</div>
              <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 14.5, lineHeight: 1.65, color: KIT.MUTE }}>{b}</div>
            </div>
          ))}
        </Grid>
      </Section>

      {/* 02 marks */}
      <Section id="s-marks" k="02" title="The logo" bg={KIT.PAPER2}
        kicker="One mark, three honest sizes. The badge sheds detail as it shrinks so it stays crisp from a neon sign to a favicon.">
        <Grid min={240}>
          <Cell caption="Primary badge" sub="Menus, signage, packaging" bg={C.cream}><Badge s={200} /></Cell>
          <Cell caption="Core mark" sub="App icon, small sizes"><Core s={150} /></Cell>
          <Cell caption="CT monogram" sub="Lids, stickers, favicons"><Monogram s={130} /></Cell>
        </Grid>
      </Section>

      {/* 03 lockups */}
      <Section id="s-lockups" k="03" title="Lockups">
        <Grid min={260}>
          <Cell caption="Stacked — primary">
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 22 }}><Badge s={150} /><Wordmark size={34} /></div>
          </Cell>
          <Cell caption="Horizontal">
            <div style={{ display: 'flex', alignItems: 'center', gap: 22 }}><Core s={96} /><Wordmark size={34} center={false} /></div>
          </Cell>
          <Cell caption="Wordmark only"><Wordmark size={40} /></Cell>
          <Cell caption="Icon only"><Badge s={150} /></Cell>
        </Grid>
      </Section>

      {/* 04 clear space + min sizes */}
      <Section id="s-clear" k="04" title="Clear space & sizing" bg={KIT.PAPER2}>
        <ClearSpace />
        <div style={{ height: 28 }} />
        <MinSizes />
      </Section>

      {/* 05 misuse */}
      <Section id="s-misuse" k="05" title="Logo misuse"
        kicker="The mark’s symmetry is the whole point. Protect it — never reshape, recolor, or crowd it.">
        <Misuse />
      </Section>

      {/* 06 color */}
      <Section id="s-color" k="06" title="Color" bg={KIT.PAPER2}
        kicker="Deep teals ground the brand; turquoise and foam are the water; sand and coconut are the beach; one punchy accent carries the Gen-Z energy.">
        <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
          <Swatch name="Pine Teal" hex={C.ink} role="Primary · ink, fields, text" />
          <Swatch name="Tide Teal" hex={C.teal} role="Secondary · waves, blocks" />
          <Swatch name="Turquoise" hex={C.turq} role="Secondary · water, fills" />
          <Swatch name="Foam" hex={C.aqua} role="Tint · highlights" />
          <Swatch name="Accent" hex={C.ink} role="Sun, CTAs, energy" tweak />
          <Swatch name="Sand" hex={C.sand} role="Neutral · surfaces" />
          <Swatch name="Coconut" hex={C.cream} role="Base · paper, reverse" />
        </div>
      </Section>

      {/* 07 type */}
      <Section id="s-type" k="07" title="Typography">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(200px,0.7fr) 1.3fr', gap: 44, alignItems: 'start' }}>
          <div>
            <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 72, fontWeight: 700, color: KIT.INK2, lineHeight: 1 }}>Aa</div>
            <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 21, fontWeight: 600, marginTop: 14, color: '#1a3b36' }}>Space Grotesk</div>
            <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 13.5, color: KIT.FAINT, marginTop: 4, lineHeight: 1.6 }}>Display & wordmark. Paired with <b>Outfit</b> for body — clean, rounded, effortless.</div>
            <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 14, letterSpacing: '0.26em', color: KIT.GOLD, marginTop: 18 }}>ABCDEFG · 0123456789</div>
          </div>
          <div>
            <TypeRow label="Display" font="'Space Grotesk', sans-serif" size={44} weight={700} sample="Sunday Sundown" />
            <TypeRow label="Heading" font="'Space Grotesk', sans-serif" size={28} weight={600} sample="Coconut Bar" />
            <TypeRow label="Subhead" font="'Outfit', sans-serif" size={19} weight={600} sample="Steps from the sand" />
            <TypeRow label="Body" font="'Outfit', sans-serif" size={15} weight={400} sample="Slow afternoons, cold drinks, good light." />
            <TypeRow label="Caption" font="'Space Grotesk', sans-serif" size={12} weight={500} sample="WHERE OCEAN MEETS CITY" />
          </div>
        </div>
      </Section>

      {/* 08 pattern */}
      <Section id="s-pattern" k="08" title="The wave pattern" bg={KIT.PAPER2}
        kicker="The tide lines from the core mark extend into a seamless texture — for packaging fills, social backgrounds, and printed liners.">
        <Grid min={220}>
          <Cell caption="On coconut" pad={0} minH={150}><WavePattern height={170} bg={C.cream} wave={C.teal} /></Cell>
          <Cell caption="On teal" pad={0} minH={150}><WavePattern height={170} bg={C.ink} wave={C.aqua} /></Cell>
          <Cell caption="On accent" pad={0} minH={150}><WavePattern height={170} bg={'var(--ct-accent)'} wave={C.cream} /></Cell>
        </Grid>
      </Section>

      {/* 09 one-color */}
      <Section id="s-mono" k="09" title="One-color & reversed">
        <Grid min={220}>
          <Cell caption="Reversed" bg={C.ink}><Badge s={170} reversed={true} /></Cell>
          <Cell caption="One-color · ink" bg={C.cream}><Badge s={170} mono={C.ink} /></Cell>
          <Cell caption="One-color · reversed" bg={C.teal}><Badge s={170} mono={C.cream} /></Cell>
          <Cell caption="One-color · accent" bg="#fff"><Badge s={170} mono={'var(--ct-accent)'} /></Cell>
        </Grid>
      </Section>

      {/* 10 collateral */}
      <Section id="s-collateral" k="10" title="Collateral" bg={KIT.PAPER2}
        kicker="The system in the wild — built for a feed-first, merch-loving audience.">
        <Grid min={230}>
          <Cell caption="Business cards"><BusinessCard /></Cell>
          <Cell caption="Menu"><MenuCard /></Cell>
          <Cell caption="Storefront signage" pad={0}><Signage /></Cell>
          <Cell caption="Social post"><SocialPost /></Cell>
          <Cell caption="Neon sign" bg="#070f0d" pad={0}><NeonSign /></Cell>
          <Cell caption="To-go cup"><Cup /></Cell>
          <Cell caption="Gift card"><GiftCard /></Cell>
          <Cell caption="Tote bag"><Tote /></Cell>
          <Cell caption="Takeaway bag"><Bag /></Cell>
          <Cell caption="Staff tee"><Tee /></Cell>
          <Cell caption="Phone wallpaper"><Wallpaper /></Cell>
          <Cell caption="Coaster / patch"><Coaster /></Cell>
          <Cell caption="Social avatars">
            <div style={{ display: 'flex', gap: 16 }}><Avatar /><Avatar accentBg /></div>
          </Cell>
        </Grid>
      </Section>

      {/* 11 principles */}
      <Section id="s-why" k="11" title="Brand principles">
        <Grid min={240} gap={30}>
          {[
            ['Photogenic by design', 'The circular stamp frames perfectly in a profile picture, story sticker, or embroidered patch — no cropping, no compromise.'],
            ['One clever mark', 'Coconut and tide live in a single medallion: the husk ring and the sunrise over water. Never two literal icons stuck together.'],
            ['Built to flex', 'Badge → core → monogram gives three honest sizes; the accent stays swappable so seasonal drops shift mood without breaking the system.'],
          ].map(([h, b]) => (
            <div key={h}>
              <div style={{ width: 30, height: 4, borderRadius: 2, background: 'var(--ct-accent)', marginBottom: 16 }} />
              <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 18, fontWeight: 600, color: KIT.INK2, marginBottom: 8 }}>{h}</div>
              <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 15, lineHeight: 1.65, color: KIT.MUTE }}>{b}</div>
            </div>
          ))}
        </Grid>
      </Section>

      {/* footer */}
      <div style={{ padding: '46px 34px', textAlign: 'center', background: C.ink }}>
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 18 }}><Core s={64} mono={C.cream} /></div>
        <div style={{ fontFamily: "'Space Grotesk', sans-serif", fontSize: 13, letterSpacing: '0.34em', color: 'rgba(247,241,228,0.7)' }}>WHERE OCEAN MEETS CITY</div>
        <div style={{ fontFamily: "'Outfit', sans-serif", fontSize: 12, color: 'rgba(247,241,228,0.4)', marginTop: 10 }}>Coco Tide · Brand Kit · Hulhumalé, Maldives</div>
      </div>

      <TweaksPanel>
        <TweakSection label="Accent" />
        <TweakColor label="Accent color" value={t.accent} options={ACCENTS} onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Typography" />
        <TweakRadio label="Wordmark font" value={t.wordFont} options={['Space Grotesk', 'Outfit', 'Sora']} onChange={(v) => setTweak('wordFont', v)} />
        <TweakSection label="Cover" />
        <TweakRadio label="Cover field" value={t.cover} options={['reversed', 'light']} onChange={(v) => setTweak('cover', v)} />
      </TweaksPanel>
    </div>
  );
}

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