// App.jsx — packaging studio layout.

const SectionTitle = ({ eyebrow, title, lede }) => (
  <div style={appStyles.head}>
    <div style={appStyles.eyebrow}>{eyebrow}</div>
    <h2 style={appStyles.title}>{title}</h2>
    {lede && <p style={appStyles.lede}>{lede}</p>}
  </div>
);

const Spec = ({ label, value }) => (
  <div style={appStyles.spec}>
    <div style={appStyles.specLbl}>{label}</div>
    <div style={appStyles.specVal}>{value}</div>
  </div>
);

const App = () => (
  <main>
    {/* Studio header */}
    <header style={appStyles.shellHead}>
      <div style={appStyles.headInner}>
        <div style={appStyles.brandRow}>
          <img src="../../assets/mark-hex.svg" alt="" style={{ width: 36, height: 36, color: 'var(--gold)' }}/>
          <div>
            <div style={appStyles.brand}>HEXQUEEN</div>
            <div style={appStyles.brandSub}>PACKAGING — UI KIT</div>
          </div>
        </div>
        <div style={appStyles.brandRight}>
          <div style={appStyles.specLbl}>PRODUCTION</div>
          <div style={appStyles.specVal}>v0.1 · For review</div>
        </div>
      </div>
    </header>

    {/* HONEY LABELS */}
    <section style={appStyles.section}>
      <SectionTitle
        eyebrow="01 — HONEY LABEL"
        title="The square jar label."
        lede="Cream ground, copper rule. Printed flat on uncoated paper. Two-colour: copper and ink-grey. Foil is reserved for the seal."
      />
      <div style={appStyles.row}>
        <div style={appStyles.stage}>
          <HoneyLabel variant="standard" />
          <div style={appStyles.caption}>
            <Spec label="VARIANT" value="Standard — Hedgerow July" />
            <Spec label="STOCK" value="120gsm uncoated, off-white" />
            <Spec label="DIE" value="70 × 70 mm, square corners" />
            <Spec label="INKS" value="Pantone 7588 C + 446 C" />
          </div>
        </div>
        <div style={appStyles.stage}>
          <HoneyLabel variant="comb"
            hive="WITHYDITCH"
            press="June MMXXV"
            weight="220 g"
            flora="HEDGEROW · COMB · UNFILTERED"
            lot="LOT 25-06-C"/>
          <div style={appStyles.caption}>
            <Spec label="VARIANT" value="Comb in jar — limited release" />
            <Spec label="USE" value="Slightly different headline. Same plate." />
            <Spec label="EDITION" value="200 jars" />
          </div>
        </div>
      </div>
    </section>

    {/* MEAD LABEL + BOTTLE */}
    <section style={{ ...appStyles.section, background: 'var(--ink-soft)', borderTop: '1px solid var(--rule)', borderBottom: '1px solid var(--rule)' }}>
      <SectionTitle
        eyebrow="02 — MEAD QUEEN BOTTLE"
        title="Mead by the bottle, on dark glass."
        lede="Label sits on the lower body. Wax seal sits on the neck. Every bottle is numbered out of the edition."
      />
      <div style={appStyles.row}>
        <div style={appStyles.stage}>
          <BottleMockup
            neckSealColor="wax"
            label={<MeadLabel name="Smoke Black" bottle="12" edition="84" notes="OAK · SMOKE · DARK HONEY" />}
          />
          <div style={appStyles.caption}>
            <Spec label="GLASS" value="500 ml burgundy, antique green-black" />
            <Spec label="CLOSURE" value="Natural cork, burnt-copper foil capsule" />
            <Spec label="LABEL" value="120 × 200 mm, single-piece front" />
            <Spec label="SEAL" value="Wax puck on neck — copper-deep" />
          </div>
        </div>

        <div style={{ ...appStyles.stage, gap: 28 }}>
          <MeadLabel />
          <MeadLabel name="Rough Honey" bottle="04" edition="60" caskAge="Sparkling, semi-dry" abv="9.8% ABV" notes="LIME · APPLE · GRASS"/>
          <div style={appStyles.caption}>
            <Spec label="VARIANTS" value="Same plate, two recipes" />
            <Spec label="EDITION" value="Hand-numbered at the press" />
          </div>
        </div>
      </div>
    </section>

    {/* WAX SEALS */}
    <section style={appStyles.section}>
      <SectionTitle
        eyebrow="03 — WAX SEAL"
        title="The maker's mark, in wax."
        lede="Applied at the bench, one per object. Three permitted colours: copper-deep (default), mead-deep (Mead Queen), and antique gold (presentation / press)."
      />
      <div style={appStyles.row}>
        <div style={appStyles.stage}>
          <WaxSeal size={220} color="wax" />
          <div style={appStyles.caption}>
            <Spec label="WAX" value="Copper-deep — house default" />
            <Spec label="USE" value="Honey jars, certificates, sign-offs" />
          </div>
        </div>
        <div style={appStyles.stage}>
          <WaxSeal size={220} color="mead" />
          <div style={appStyles.caption}>
            <Spec label="WAX" value="Mead-deep — sub-brand reserve" />
            <Spec label="USE" value="Mead Queen bottle necks only" />
          </div>
        </div>
        <div style={appStyles.stage}>
          <WaxSeal size={220} color="gold" />
          <div style={appStyles.caption}>
            <Spec label="WAX" value="Antique gold — presentation" />
            <Spec label="USE" value="Crates, press, gift orders" />
          </div>
        </div>
      </div>
    </section>

    {/* CRATE STAMP */}
    <section style={{ ...appStyles.section, background: 'var(--ink-soft)', borderTop: '1px solid var(--rule)' }}>
      <SectionTitle
        eyebrow="04 — CRATE STAMP"
        title="Stencilled on raw wood, single colour."
        lede="One stamp per crate face, large, slightly off-centre. Wax ink on the rough wood. Never re-typeset — print the supplied SVG at scale."
      />
      <div style={{ ...appStyles.row, justifyContent: 'center' }}>
        <CrateStamp />
      </div>
      <div style={{ ...appStyles.row, justifyContent: 'center', marginTop: 16 }}>
        <div style={appStyles.caption}>
          <Spec label="CRATE" value="Untreated softwood, 6-bottle" />
          <Spec label="STAMP" value="Stencil + wax-ink roller" />
          <Spec label="POSITION" value="One face, off-centre — never both" />
        </div>
      </div>
    </section>
  </main>
);

const appStyles = {
  shellHead: { background: 'var(--ink)', borderBottom: '1px solid var(--gold)', position: 'sticky', top: 0, zIndex: 10 },
  headInner: {
    maxWidth: 1240, margin: '0 auto', padding: '20px var(--gutter-page)',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
  },
  brandRow: { display: 'flex', alignItems: 'center', gap: 14 },
  brand: { fontFamily: 'var(--font-display)', fontSize: 16, letterSpacing: '0.32em', color: 'var(--wax)' },
  brandSub: { fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.24em', color: 'var(--gold)', marginTop: 2 },
  brandRight: { textAlign: 'right' },

  section: { background: 'var(--ink)', padding: '80px var(--gutter-page) 96px' },
  head: { maxWidth: 1240, margin: '0 auto 56px' },
  eyebrow: {
    fontFamily: 'var(--font-display)', fontSize: 11, letterSpacing: '0.24em',
    color: 'var(--gold)', textTransform: 'uppercase', marginBottom: 16,
  },
  title: {
    fontFamily: 'var(--font-editorial)', fontSize: 48, lineHeight: 1.05,
    letterSpacing: '-0.012em', color: 'var(--wax)', fontWeight: 500, margin: 0, maxWidth: 720,
  },
  lede: {
    fontFamily: 'var(--font-editorial)', fontStyle: 'italic', fontSize: 18,
    color: 'var(--smoke-pale)', margin: '18px 0 0', maxWidth: 640,
    lineHeight: 1.5, fontVariantNumeric: 'oldstyle-nums',
  },
  row: {
    maxWidth: 1240, margin: '0 auto',
    display: 'flex', flexWrap: 'wrap', gap: 80, alignItems: 'flex-start', justifyContent: 'flex-start',
  },
  stage: { display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 32 },
  caption: { display: 'grid', gridTemplateColumns: '1fr', gap: 8, minWidth: 280, maxWidth: 320 },
  spec: { display: 'grid', gridTemplateColumns: '90px 1fr', gap: 14, alignItems: 'baseline', paddingTop: 6, borderTop: '1px solid var(--rule-soft)' },
  specLbl: { fontFamily: 'var(--font-display)', fontSize: 9, letterSpacing: '0.22em', color: 'var(--gold)', textTransform: 'uppercase' },
  specVal: { fontFamily: 'var(--font-editorial)', fontSize: 14, color: 'var(--wax)', fontVariantNumeric: 'oldstyle-nums', lineHeight: 1.4 },
};

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