/* ============================================================
   Bizia — Design & Brand  (/app/design)
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const { Card, Badge, Button, Icon, PageHeader } = window;

  function DesignPage() {
    const [d, setD] = useState(window.DATA.design);
    const [style, setStyle] = useState('warm');
    const styles = window.DATA.wizard.designs;
    const live = d.palette;
    // Hash-routed SPA — the ?project= query string lives inside
    // window.location.hash, not window.location.search (which is always
    // empty here). Reading .search silently fell back to a mock project.
    const projectId = new URLSearchParams(window.location.hash.split('?')[1] || '').get('project') || window.DATA.projects?.[0]?.id;

    useEffect(() => {
      if (!projectId) return;
      window.API.design.get(projectId).then(r => { if (r) setD(r); }).catch(() => {});
    }, [projectId]);

    return React.createElement('div', { className: 'bz-anim-up' },
      React.createElement(PageHeader, {
        icon: 'palette', title: 'Design & Brand',
        sub: 'Your website’s look and feel. Change the style and Bizia restyles every page to match — instantly and consistently.',
        actions: React.createElement(Button, { variant: 'primary', icon: 'wand', onClick: () => window.toast({ title: 'Restyling your site', desc: 'Applied across all pages.', tone: 'primary' }) }, 'Apply to all pages'),
      }),

      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'minmax(0,1.4fr) minmax(0,1fr)', gap: 16, alignItems: 'start' }, className: 'bz-design-grid' },
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          // style direction
          React.createElement(Card, { pad: 22 },
            React.createElement('h3', { style: { fontSize: 15.5, fontWeight: 650, marginBottom: 4 } }, 'Style direction'),
            React.createElement('p', { style: { fontSize: 13, color: 'var(--muted)', marginBottom: 16 } }, 'Pick an overall vibe. Bizia adjusts colors, fonts and spacing accordingly.'),
            React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(180px,1fr))', gap: 12 } },
              styles.map(s => { const sel = style === s.id; return React.createElement('button', { key: s.id, onClick: () => setStyle(s.id),
                style: { textAlign: 'left', padding: 16, borderRadius: 'var(--r-md)', cursor: 'pointer', background: 'var(--surface)', border: '1.5px solid ' + (sel ? 'var(--primary)' : 'var(--border)'), boxShadow: sel ? '0 0 0 3px var(--ring)' : 'none' } },
                React.createElement('div', { style: { display: 'flex', gap: 5, marginBottom: 12 } }, s.swatch.map((c, i) => React.createElement('span', { key: i, style: { width: 26, height: 26, borderRadius: 8, background: c, border: '1px solid rgba(0,0,0,0.06)' } }))),
                React.createElement('div', { style: { fontSize: 14, fontWeight: 650, display: 'flex', alignItems: 'center', gap: 6 } }, s.label, sel ? React.createElement(Icon, { name: 'checkcircle', size: 15, style: { color: 'var(--primary)' } }) : null),
                React.createElement('div', { style: { fontSize: 12, color: 'var(--muted)', marginTop: 3 } }, s.desc)); })),
          ),
          // colors
          React.createElement(Card, { pad: 22 },
            React.createElement('h3', { style: { fontSize: 15.5, fontWeight: 650, marginBottom: 14 } }, 'Brand colors'),
            React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(150px,1fr))', gap: 12 } },
              live.map((c, i) => React.createElement('div', { key: i, style: { borderRadius: 'var(--r-md)', overflow: 'hidden', border: '1px solid var(--border-soft)' } },
                React.createElement('div', { style: { height: 64, background: c.hex } }),
                React.createElement('div', { style: { padding: '10px 12px', background: 'var(--surface-2)' } },
                  React.createElement('div', { style: { fontSize: 13, fontWeight: 650 } }, c.name),
                  React.createElement('div', { style: { fontSize: 11, color: 'var(--muted)', fontFamily: 'var(--font-mono)', marginTop: 1 } }, c.hex),
                  React.createElement('div', { style: { fontSize: 11, color: 'var(--muted-2)', marginTop: 3 } }, c.role))))),
          ),
          // fonts
          React.createElement(Card, { pad: 22 },
            React.createElement('h3', { style: { fontSize: 15.5, fontWeight: 650, marginBottom: 14 } }, 'Typography'),
            React.createElement('div', { style: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }, className: 'bz-design-files' },
              d.fonts.map((f, i) => React.createElement('div', { key: i, style: { padding: 18, borderRadius: 'var(--r-md)', background: 'var(--surface-2)', border: '1px solid var(--border-soft)' } },
                React.createElement('div', { style: { fontSize: 44, fontWeight: 700, lineHeight: 1, fontFamily: f.preview, color: 'var(--text)' } }, f.sample),
                React.createElement('div', { style: { fontSize: 14, fontWeight: 650, marginTop: 12 } }, f.name),
                React.createElement('div', { style: { fontSize: 12, color: 'var(--muted)' } }, f.role + ' · ' + f.stack)))),
          ),
        ),
        // right: live preview + tokens
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          React.createElement(Card, { pad: 0, style: { overflow: 'hidden' } },
            React.createElement('div', { style: { padding: '12px 18px', borderBottom: '1px solid var(--border-soft)', fontSize: 12.5, fontWeight: 650, color: 'var(--muted)' } }, 'Live preview'),
            React.createElement('div', { style: { padding: 22, background: live[2].hex } },
              React.createElement('div', { style: { fontFamily: 'Georgia, serif', fontSize: 26, fontWeight: 750, color: live[1].hex, letterSpacing: '-0.02em' } }, 'Mornings, made better.'),
              React.createElement('p', { style: { fontSize: 13.5, color: live[1].hex, opacity: 0.7, marginTop: 8, lineHeight: 1.5 } }, 'All-day brunch and single-origin coffee, served with care.'),
              React.createElement('div', { style: { display: 'flex', gap: 10, marginTop: 16 } },
                React.createElement('span', { style: { padding: '10px 18px', borderRadius: 999, background: live[0].hex, color: '#fff', fontSize: 13.5, fontWeight: 650 } }, 'Book a table'),
                React.createElement('span', { style: { padding: '10px 18px', borderRadius: 999, border: '1.5px solid ' + live[1].hex, color: live[1].hex, fontSize: 13.5, fontWeight: 650 } }, 'View menu')),
              React.createElement('div', { style: { marginTop: 16, padding: 14, borderRadius: 12, background: '#fff', border: '1px solid rgba(0,0,0,0.06)' } },
                React.createElement('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 9px', borderRadius: 999, background: live[3].hex + '22', color: live[3].hex, fontSize: 11, fontWeight: 700 } }, '★ Featured'),
                React.createElement('div', { style: { fontSize: 14, fontWeight: 650, marginTop: 8, color: live[1].hex } }, 'Maple-miso waffles'),
                React.createElement('div', { style: { fontSize: 12, color: live[1].hex, opacity: 0.6, marginTop: 2 } }, 'Seasonal favourite · $16'))),
          ),
          // tokens
          React.createElement(Card, { pad: 20 },
            React.createElement('h4', { style: { fontSize: 14.5, fontWeight: 650, marginBottom: 14 } }, 'Design tokens'),
            [['Corner radius', d.radius, 'box'], ['Spacing', d.spacing, 'layers'], ['Logo', d.logo, 'sparkles']].map((t, i) =>
              React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 11, padding: '11px 0', borderBottom: i < 2 ? '1px solid var(--border-soft)' : 'none' } },
                React.createElement(Icon, { name: t[2], size: 16, style: { color: 'var(--muted)' } }),
                React.createElement('span', { style: { flex: 1, fontSize: 13.5, color: 'var(--text-2)' } }, t[0]),
                React.createElement('span', { style: { fontSize: 13.5, fontWeight: 600 } }, t[1]))),
          ),
          // CTA strategy
          React.createElement(Card, { pad: 20 },
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 } }, React.createElement(Icon, { name: 'target', size: 16, style: { color: 'var(--secondary)' } }), React.createElement('h4', { style: { fontSize: 14.5, fontWeight: 650 } }, 'CTA strategy')),
            React.createElement('p', { style: { fontSize: 13, color: 'var(--text-2)', lineHeight: 1.55 } }, d.ctaStrategy)),
        ),
      ),
      React.createElement('style', null, '@media(max-width:900px){.bz-design-grid{grid-template-columns:1fr !important}}@media(max-width:520px){.bz-design-files{grid-template-columns:1fr !important}}'),
    );
  }

  window.DesignPage = DesignPage;
})();