/* ds-components.jsx — Buttons, Inputs, Tags, Cards, Nav, Footer
   Each component shown with all relevant states.
   States = how a thing looks in different situations:
     default · hover · focus (keyboard) · active (being clicked) · disabled
*/

/* ── BUTTONS ──────────────────────────────────────────── */
const Btn = ({ variant='primary', size='md', disabled, children, onClick, forceHover=false }) => {
  const sizes = {
    sm: { px: S[3], py: S[2], fs: 12, h: 36 },
    md: { px: S[5], py: S[3], fs: 14, h: 44 },
    lg: { px: S[6], py: S[4], fs: 16, h: 56 },
  }[size];

  const variants = {
    primary: { bg: T.ink,    fg: T.bone, br: T.ink,    hbg: T.neon, hfg: T.ink },
    ghost:   { bg: 'transparent', fg: T.ink, br: T.ink, hbg: T.ink,  hfg: T.bone },
    link:    { bg: 'transparent', fg: T.ink, br: 'transparent', hbg: 'transparent', hfg: T.ink, underline: true },
  }[variant];

  const [hoverState, setHover] = React.useState(false);
  const hover = forceHover || hoverState;
  const isLink = variant === 'link';

  return (
    <button
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      disabled={disabled}
      style={{
        height: sizes.h, padding: `0 ${sizes.px}px`,
        background: disabled ? T.n200 : (hover ? variants.hbg : variants.bg),
        color: disabled ? T.n400 : (hover ? variants.hfg : variants.fg),
        border: `1px solid ${disabled ? T.n300 : variants.br}`,
        fontFamily:'inherit', fontWeight:700, fontSize: sizes.fs,
        letterSpacing:'.02em', textTransform:'none',
        cursor: disabled ? 'not-allowed' : 'pointer',
        transition: `background ${M.fast.d}ms ${M.fast.e}, color ${M.fast.d}ms ${M.fast.e}`,
        textDecoration: isLink ? 'underline' : 'none',
        textUnderlineOffset: 4, textDecorationThickness: 2,
        display:'inline-flex', alignItems:'center', justifyContent:'center', gap:S[2],
      }}
    >{children}</button>
  );
};

const ButtonsBlock = () => (
  <Sub no="3.1" title="Buttons">
    <div style={{ display:'grid', gridTemplateColumns:'180px 1fr 1fr 1fr', gap:0, border:`1px solid ${T.ink}`, background:T.paper }}>
      {[
        ['', 'Default', 'Hover', 'Disabled'],
        ['PRIMARY · LG', <Btn size="lg">Add to bag</Btn>, <Btn size="lg" forceHover>Add to bag</Btn>, <Btn size="lg" disabled>Add to bag</Btn>],
        ['PRIMARY · MD', <Btn>Buy now</Btn>, <Btn forceHover>Buy now</Btn>, <Btn disabled>Buy now</Btn>],
        ['PRIMARY · SM', <Btn size="sm">Subscribe</Btn>, <Btn size="sm" forceHover>Subscribe</Btn>, <Btn size="sm" disabled>Subscribe</Btn>],
        ['GHOST',        <Btn variant="ghost">Continue shopping</Btn>, <Btn variant="ghost" forceHover>Continue shopping</Btn>, <Btn variant="ghost" disabled>Continue shopping</Btn>],
        ['LINK',         <Btn variant="link">View size guide →</Btn>, <Btn variant="link" forceHover>View size guide →</Btn>, <Btn variant="link" disabled>View size guide →</Btn>],
      ].map((row, r) => (
        <React.Fragment key={r}>
          {row.map((cell, c) => (
            <div key={c} style={{
              padding:`${S[4]}px ${S[5]}px`,
              borderBottom: r < 5 ? `1px solid ${T.n200}` : 'none',
              borderRight: c < 3 ? `1px solid ${T.n200}` : 'none',
              display:'flex', alignItems:'center', justifyContent: c === 0 ? 'flex-start' : 'flex-start',
              minHeight: 80, background: r === 0 ? T.bone : T.paper,
            }}>
              {r === 0 || c === 0 ? (
                <span className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.6 }}>{cell}</span>
              ) : (
                cell
              )}
            </div>
          ))}
        </React.Fragment>
      ))}
    </div>
    <Note>↳ Default = ink/bone · Hover = neon background · Disabled = grey · LINK only used inline in body copy</Note>
  </Sub>
);

/* utility — render a button as if hovered (for the hover column in the matrix) */
const ForceHover = ({ children }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const btn = ref.current?.querySelector('button');
    if (!btn) return;
    btn.dispatchEvent(new MouseEvent('mouseenter', { bubbles: true }));
  }, []);
  return <div ref={ref}>{children}</div>;
};

/* ── INPUTS ───────────────────────────────────────────── */
const Field = ({ label, placeholder, hint, error, value, type='text', disabled }) => {
  const [v, setV] = React.useState(value || '');
  const [focus, setFocus] = React.useState(false);
  const errored = !!error;
  const borderColor = errored ? T.negative : (focus ? T.ink : T.n300);

  return (
    <label style={{ display:'flex', flexDirection:'column', gap:S[2], width:'100%' }}>
      <span className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color: T.n500 }}>
        {label}
      </span>
      <input
        type={type}
        value={v}
        placeholder={placeholder}
        disabled={disabled}
        onFocus={() => setFocus(true)}
        onBlur={() => setFocus(false)}
        onChange={e => setV(e.target.value)}
        style={{
          height: 48, padding:`0 ${S[3]}px`,
          background: disabled ? T.n100 : T.paper,
          color: disabled ? T.n400 : T.ink,
          border: `1px solid ${borderColor}`,
          borderBottomWidth: focus ? 2 : 1,
          fontFamily:'inherit', fontSize:15, outline:'none',
          transition: `border-color ${M.fast.d}ms ${M.fast.e}`,
        }}
      />
      {(hint || error) && (
        <span className="mono" style={{
          fontSize:10, letterSpacing:'.12em', textTransform:'uppercase',
          color: errored ? T.negative : T.n500,
        }}>{error || hint}</span>
      )}
    </label>
  );
};

const InputsBlock = () => (
  <Sub no="3.2" title="Inputs">
    <div style={{ display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:S[5], padding:S[6], background:T.paper, border:`1px solid ${T.ink}` }}>
      <Field label="Email · default" placeholder="you@studio.com"/>
      <Field label="Email · with value" value="theresa@glose.studio"/>
      <Field label="Email · error" value="not-an-email" error="Use a valid email"/>
      <Field label="Email · disabled" value="locked@glose.studio" disabled/>
    </div>
    <Note>↳ Border bottom thickens to 2px on focus · error = negative red · no rounded corners</Note>
  </Sub>
);

/* ── TAGS / PILLS ─────────────────────────────────────── */
const Tag = ({ children, variant='default', dot }) => {
  const v = {
    default: { bg: 'transparent', fg: T.ink, br: T.ink },
    solid:   { bg: T.ink,         fg: T.bone, br: T.ink },
    neon:    { bg: T.neon,        fg: T.ink,  br: T.ink },
    ghost:   { bg: 'transparent', fg: T.n500, br: T.n300 },
  }[variant];
  return (
    <span className="mono" style={{
      display:'inline-flex', alignItems:'center', gap:6,
      padding:`6px 10px`, fontSize:10, letterSpacing:'.18em', textTransform:'uppercase',
      background: v.bg, color: v.fg, border:`1px solid ${v.br}`,
    }}>
      {dot && <span style={{ width:6, height:6, borderRadius:'50%', background: dot }}/>}
      {children}
    </span>
  );
};

const TagsBlock = () => (
  <Sub no="3.3" title="Tags & pills">
    <div style={{ padding:S[6], background:T.paper, border:`1px solid ${T.ink}`, display:'flex', flexWrap:'wrap', gap:S[3] }}>
      <Tag>FW26</Tag>
      <Tag variant="solid">EDITION 200</Tag>
      <Tag variant="neon">NEW DROP</Tag>
      <Tag variant="ghost">SOLD OUT</Tag>
      <Tag dot={T.positive}>IN STOCK</Tag>
      <Tag dot={T.negative}>LAST 3</Tag>
      <Tag variant="solid" dot={T.neon}>● LIVE</Tag>
    </div>
    <Note>↳ Solid + neon for status · Default + ghost for metadata · Always uppercase mono</Note>
  </Sub>
);

/* ── PRODUCT CARD ─────────────────────────────────────── */
const ProductCard = ({ name, color, price, status, tag, hovered }) => {
  const [hover, setHover] = React.useState(hovered || false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(hovered ? true : false)}
      style={{ background:T.paper, cursor:'pointer' }}
    >
      <div style={{
        position:'relative', aspectRatio:'4/5', background: T.n200, overflow:'hidden',
      }}>
        {/* placeholder image */}
        <div style={{
          position:'absolute', inset:0,
          background: `linear-gradient(135deg, ${T.chrome} 0%, ${T.n300} 50%, ${T.n400} 100%)`,
          transform: hover ? 'scale(1.04)' : 'scale(1)',
          transition: `transform ${M.slow.d}ms ${M.slow.e}`,
        }}/>
        <div style={{
          position:'absolute', inset:0, display:'flex', alignItems:'center', justifyContent:'center',
          fontFamily:"'Helvetica Neue', sans-serif", fontWeight:900, fontSize:48,
          color:T.bone, opacity:.5, letterSpacing:'-0.04em',
        }}>{name.split(' ')[0]}</div>
        {/* tag */}
        {tag && <div style={{ position:'absolute', top:S[3], left:S[3] }}><Tag variant={tag.variant} dot={tag.dot}>{tag.label}</Tag></div>}
        {/* quick add on hover */}
        <div style={{
          position:'absolute', left:0, right:0, bottom:0,
          background:T.ink, color:T.bone,
          padding:`${S[3]}px ${S[4]}px`, fontWeight:700, fontSize:13, letterSpacing:'.02em',
          textAlign:'center',
          transform: hover ? 'translateY(0)' : 'translateY(100%)',
          transition: `transform ${M.base.d}ms ${M.base.e}`,
        }}>+ Quick add</div>
      </div>
      <div style={{ padding:`${S[4]}px ${S[4]}px ${S[4]}px`, display:'flex', justifyContent:'space-between', alignItems:'baseline', gap:S[3] }}>
        <div>
          <div style={{ fontWeight:700, fontSize:15, letterSpacing:'-0.01em' }}>{name}</div>
          <div className="mono" style={{ fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', opacity:.55, marginTop:2 }}>{color}</div>
        </div>
        <div style={{ fontWeight:900, fontSize:16, whiteSpace:'nowrap' }}>{price}</div>
      </div>
    </div>
  );
};

const CardsBlock = () => (
  <Sub no="3.4" title="Product card">
    <div style={{ display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:S[5], padding:S[6], background:T.bone2, border:`1px solid ${T.ink}` }}>
      <ProductCard name="Loop Bag"    color="Chrome"   price="€620,00" tag={{label:'NEW', variant:'neon'}}/>
      <ProductCard name="Fringe Charm" color="Lavender" price="€85,00"/>
      <ProductCard name="Cast Belt"   color="Mirror"   price="€340,00" tag={{label:'LAST 3', dot:T.negative}}/>
      <ProductCard name="Loop Bag"    color="Chrome"   price="€620,00" hovered/>
    </div>
    <Note>↳ Default · Default · Default · Hover (with quick-add slide-up)</Note>
  </Sub>
);

/* ── NAV ──────────────────────────────────────────────── */
const Nav = () => (
  <Sub no="3.5" title="Nav · sticky header">
    <div style={{ background:T.bone, border:`1px solid ${T.ink}` }}>
      <div className="mono" style={{
        background:T.ink, color:T.bone, padding:`${S[2]}px ${S[5]}px`,
        fontSize:10, letterSpacing:'.2em', textTransform:'uppercase',
        display:'flex', justifyContent:'center', gap:S[5],
      }}>
        <span style={{color:T.neon}}>● LIVE</span>
        <span>DROP 02 · FW26 · NOV 14, 18:00 CET</span>
        <span style={{opacity:.5}}>FREE EU SHIPPING OVER €300</span>
      </div>
      <div style={{
        display:'flex', alignItems:'center', justifyContent:'space-between',
        padding:`${S[4]}px ${S[6]}px`, borderTop:`1px solid ${T.ink}`,
      }}>
        <div style={{ display:'flex', alignItems:'center', gap:S[6] }}>
          <Wordmark size={28}/>
          <div className="mono" style={{ display:'flex', gap:S[5], fontSize:11, letterSpacing:'.18em', textTransform:'uppercase' }}>
            <a style={{ color:T.ink, textDecoration:'none' }} href="#">SHOP</a>
            <a style={{ color:T.ink, textDecoration:'none' }} href="#">DROPS</a>
            <a style={{ color:T.ink, textDecoration:'none' }} href="#">LOOKBOOK</a>
            <a style={{ color:T.ink, textDecoration:'none' }} href="#">STUDIO</a>
          </div>
        </div>
        <div className="mono" style={{ display:'flex', gap:S[5], fontSize:11, letterSpacing:'.18em', textTransform:'uppercase' }}>
          <a style={{ color:T.ink, textDecoration:'none' }} href="#">SEARCH</a>
          <a style={{ color:T.ink, textDecoration:'none' }} href="#">ACCOUNT</a>
          <a style={{ color:T.ink, textDecoration:'none' }} href="#">BAG · 2</a>
        </div>
      </div>
    </div>
  </Sub>
);

/* ── FOOTER ───────────────────────────────────────────── */
const Footer = () => (
  <Sub no="3.6" title="Footer">
    <div style={{ background:T.ink, color:T.bone, padding:S[8], border:`1px solid ${T.ink}` }}>
      <div style={{ display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:S[6] }}>
        <div>
          <Wordmark size={56} color={T.bone}/>
          <p style={{ marginTop:S[5], fontSize:14, lineHeight:1.6, color:T.n300, maxWidth:320 }}>
            Hand-fed metalwork from a one-room studio in Florence. Editions of 200, numbered.
          </p>
        </div>
        {[
          ['SHOP', ['All', 'Bags', 'Charms', 'Archive']],
          ['STUDIO', ['Story', 'Process', 'Press', 'Stockists']],
          ['HELP', ['Shipping', 'Returns', 'Care', 'Contact']],
        ].map(([title, items]) => (
          <div key={title}>
            <div className="mono" style={{ fontSize:10, letterSpacing:'.2em', color:T.neon, marginBottom:S[4] }}>{title}</div>
            <ul style={{ listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:S[2] }}>
              {items.map(i => <li key={i} style={{ fontSize:14, color:T.bone }}>{i}</li>)}
            </ul>
          </div>
        ))}
      </div>
      <div className="mono" style={{
        marginTop:S[8], paddingTop:S[5], borderTop:`1px solid ${T.n500}`,
        display:'flex', justifyContent:'space-between',
        fontSize:10, letterSpacing:'.2em', textTransform:'uppercase', color:T.n300,
      }}>
        <span>© GLOSÉ STUDIO · MADE IN IT</span>
        <span>EN · EUR</span>
      </div>
    </div>
  </Sub>
);

const Components = () => (
  <Section no="03" title="Components" kicker="every state · every variant">
    <ButtonsBlock/>
    <InputsBlock/>
    <TagsBlock/>
    <CardsBlock/>
    <Nav/>
    <Footer/>
  </Section>
);

Object.assign(window, { Components, Btn, Field, Tag, ProductCard });