/* ============================================================
   Bizia — Website Plan  (/app/recommendation)
   The full generated plan: pages, design, SEO, domain, hosting.
   ============================================================ */
(function () {
  const { useState, useEffect } = React;
  const { Card, Badge, Button, Icon, BiziaMark } = window;

  function need(n) { return { core: ['primary', 'Core'], recommended: ['secondary', 'Suggested'], optional: ['neutral', 'Optional'] }[n] || ['neutral', 'Optional']; }

  function PlanSection({ icon, eyebrow, title, action, children, tone = 'primary' }) {
    const [bg, fg] = window.BZ_TONES[tone];
    return React.createElement(Card, { pad: 20 },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 11, marginBottom: 16 } },
        React.createElement('div', { style: { width: 38, height: 38, borderRadius: 10, background: bg, color: fg, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, React.createElement(Icon, { name: icon, size: 19 })),
        React.createElement('div', { style: { flex: 1 } },
          React.createElement('div', { style: { fontSize: 11.5, fontWeight: 650, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.05em' } }, eyebrow),
          React.createElement('div', { style: { fontSize: 15.5, fontWeight: 650, marginTop: 1 } }, title),
        ),
        action || null,
      ),
      children,
    );
  }

  function RecommendationPage() {
    const [r, setR] = useState(window.DATA.recommendation);
    const [selDomain, setSelDomain] = useState(r.domains[0].name);
    // 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.recommendation.get(projectId).then(res => { if (res) { setR(res); if (res.domains?.[0]) setSelDomain(res.domains[0].name); } }).catch(() => {});
    }, [projectId]);

    return React.createElement('div', { className: 'bz-anim-up' },
      // consultant header
      React.createElement('div', { style: { borderRadius: 'var(--r-xl)', overflow: 'hidden', border: '1px solid var(--border)', boxShadow: 'var(--sh-md)', marginBottom: 24, background: 'var(--surface)' } },
        React.createElement('div', { style: { position: 'relative', padding: '28px 28px 26px', background: 'linear-gradient(120deg, var(--primary) 0%, var(--primary-700) 100%)', overflow: 'hidden' } },
          React.createElement('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0 1px, transparent 1px 16px)' } }),
          React.createElement('div', { style: { position: 'relative', display: 'flex', alignItems: 'flex-start', gap: 16, flexWrap: 'wrap' } },
            React.createElement('div', { style: { width: 52, height: 52, borderRadius: 14, background: 'rgba(255,255,255,0.18)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 } }, React.createElement(BiziaMark, { size: 34 })),
            React.createElement('div', { style: { flex: 1, minWidth: 200 } },
              React.createElement('div', { style: { display: 'inline-flex', alignItems: 'center', gap: 7, padding: '5px 11px', borderRadius: 999, background: 'rgba(255,255,255,0.18)', color: '#fff', fontSize: 12, fontWeight: 600, marginBottom: 10 } },
                React.createElement(Icon, { name: 'sparkles', size: 13 }), 'Your website plan is ready'),
              React.createElement('h1', { style: { fontSize: 26, fontWeight: 720, color: '#fff', letterSpacing: '-0.03em' } }, r.business + ' — Website Plan'),
              React.createElement('p', { style: { fontSize: 14.5, color: 'rgba(255,255,255,0.88)', marginTop: 8, maxWidth: 640, lineHeight: 1.55 } }, r.summary),
            ),
          ),
        ),
        React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(150px,1fr))', borderTop: '1px solid var(--border-soft)' } },
          [['folder', 'Pages', r.pages.filter(p => p.need === 'core').length, ' core', 'Built for you'],
           ['rocket', 'Hosting', '$0', '/mo', r.hosting.provider],
           ['globe', 'Domain', '$' + r.domainCost, '/yr', 'from suggestions'],
           ['sparkles', 'Bizia plan', '$' + r.biziaPlan.price, '/mo', r.biziaPlan.name],
           ['clock', 'Build time', r.buildTime.replace('~', ''), '', 'to first preview']].map((c, i) =>
            React.createElement('div', { key: i, style: { padding: '16px 20px', borderRight: i < 4 ? '1px solid var(--border-soft)' : 'none' } },
              React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 7, fontSize: 12.5, color: 'var(--muted)', fontWeight: 550 } }, React.createElement(Icon, { name: c[0], size: 14 }), c[1]),
              React.createElement('div', { style: { display: 'flex', alignItems: 'baseline', gap: 3, marginTop: 8 } },
                React.createElement('span', { style: { fontSize: 24, fontWeight: 750, letterSpacing: '-0.03em' } }, c[2]),
                React.createElement('span', { style: { fontSize: 12.5, color: 'var(--muted)' } }, c[3])),
              React.createElement('div', { style: { fontSize: 11.5, color: 'var(--muted-2)', marginTop: 3 } }, c[4]),
            )),
        ),
      ),

      // actions
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, flexWrap: 'wrap', marginBottom: 18 } },
        React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 13.5, color: 'var(--muted)' } },
          React.createElement(Icon, { name: 'info', size: 16 }), 'Bizia recommends the simplest setup that works — customize anything anytime.'),
        React.createElement('div', { style: { display: 'flex', gap: 10 } },
          React.createElement(Button, { variant: 'outline', icon: 'wand', onClick: () => window.navigate('/app/new') }, 'Edit prompt'),
          React.createElement(Button, { variant: 'primary', icon: 'rocket', onClick: () => window.navigate('/app/builder') }, 'Start building'),
        ),
      ),

      React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'minmax(0,1.5fr) minmax(0,1fr)', gap: 16, alignItems: 'start' }, className: 'bz-plan-grid' },
        // LEFT column
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          React.createElement(PlanSection, { icon: 'layers', eyebrow: 'Recommended website', title: r.websiteType.title, tone: 'primary' },
            React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5, marginBottom: 16 } }, r.websiteType.why),
            React.createElement('div', { style: { fontSize: 12, fontWeight: 650, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 10 } }, 'Pages'),
            React.createElement('div', { style: { display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(150px,1fr))', gap: 8 } },
              r.pages.map((pg, i) => { const [tone, lbl] = need(pg.need); return React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 8, padding: '9px 12px', borderRadius: 'var(--r-sm)', background: 'var(--surface-2)', border: '1px solid var(--border-soft)' } },
                React.createElement('span', { style: { fontSize: 13, fontWeight: 550 } }, pg.name),
                React.createElement(Badge, { tone, size: 'sm' }, lbl)); }),
            ),
          ),
          React.createElement(PlanSection, { icon: 'search', eyebrow: 'Search-engine ready', title: 'SEO keywords Bizia will target', tone: 'secondary',
            action: React.createElement(Button, { variant: 'ghost', size: 'sm', iconRight: 'arrowRight', onClick: () => window.navigate('/app/seo') }, 'SEO center') },
            React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 8 } },
              r.seoKeywords.map((kw, i) => React.createElement('span', { key: i, style: { display: 'inline-flex', alignItems: 'center', gap: 6, padding: '7px 12px', borderRadius: 999, background: 'var(--surface-3)', fontSize: 13, fontWeight: 500 } },
                React.createElement(Icon, { name: 'target', size: 13, style: { color: 'var(--secondary)' } }), kw))),
            React.createElement('p', { style: { fontSize: 12.5, color: 'var(--muted)', marginTop: 12 } }, 'Bizia auto-generates page titles, meta descriptions, a sitemap and robots.txt, then guides you through Google Search Console.'),
          ),
          React.createElement(PlanSection, { icon: 'grid', eyebrow: 'What your site needs', title: 'Features & setup', tone: 'info' },
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 2 } },
              r.features.map((f, i) => { const [tone, lbl] = need(f.need); return React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 12, padding: '11px 0', borderBottom: i < r.features.length - 1 ? '1px solid var(--border-soft)' : 'none' } },
                React.createElement('div', { style: { width: 32, height: 32, borderRadius: 9, background: 'var(--surface-3)', color: 'var(--text-2)', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, React.createElement(Icon, { name: f.icon, size: 16 })),
                React.createElement('span', { style: { flex: 1, fontSize: 13.5, fontWeight: 550 } }, f.label),
                React.createElement(Badge, { tone, size: 'sm' }, lbl)); }),
            ),
          ),
        ),
        // RIGHT column
        React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 16 } },
          React.createElement(PlanSection, { icon: 'palette', eyebrow: 'Design direction', title: r.design.style, tone: 'accent',
            action: React.createElement(Button, { variant: 'ghost', size: 'sm', iconRight: 'arrowRight', onClick: () => window.navigate('/app/design') }, 'Design') },
            React.createElement('div', { style: { display: 'flex', gap: 8, marginBottom: 14 } },
              r.design.colors.map((c, i) => React.createElement('div', { key: i, style: { flex: 1 } },
                React.createElement('div', { style: { height: 44, borderRadius: 10, background: c, border: '1px solid rgba(0,0,0,0.06)' } }),
                React.createElement('div', { style: { fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--muted)', marginTop: 5, textAlign: 'center' } }, c))),
            ),
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 5, marginBottom: 12 } },
              r.design.fonts.map((f, i) => React.createElement('div', { key: i, style: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 13 } }, React.createElement(Icon, { name: 'type', size: 14, style: { color: 'var(--muted)' } }), f))),
            React.createElement('div', { style: { padding: 12, borderRadius: 'var(--r-md)', background: 'var(--surface-2)' } },
              React.createElement('div', { style: { fontSize: 11.5, fontWeight: 650, color: 'var(--muted)', marginBottom: 5 } }, 'CTA STRATEGY'),
              React.createElement('p', { style: { fontSize: 12.5, color: 'var(--text-2)', lineHeight: 1.5 } }, r.design.cta)),
          ),
          React.createElement(PlanSection, { icon: 'layoutTemplate', eyebrow: 'Recommended template', title: r.template.name, tone: 'primary',
            action: React.createElement(Button, { variant: 'ghost', size: 'sm', iconRight: 'arrowRight', onClick: () => window.navigate('/app/templates') }, 'Gallery') },
            React.createElement('div', { style: { height: 96, borderRadius: 'var(--r-md)', background: 'linear-gradient(135deg,' + r.template.accent + '22,' + r.template.accent + '08)', border: '1px solid var(--border-soft)', position: 'relative', overflow: 'hidden', marginBottom: 12 } },
              React.createElement('div', { style: { position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(135deg,' + r.template.accent + '18 0 1px, transparent 1px 10px)' } }),
              React.createElement('div', { style: { position: 'absolute', left: 12, right: 12, top: 12, height: 24, borderRadius: 6, background: r.template.accent, opacity: 0.85 } })),
            React.createElement('div', { style: { display: 'flex', flexWrap: 'wrap', gap: 6 } }, r.template.tags.map(t => React.createElement(Badge, { key: t, tone: 'neutral', size: 'sm' }, t))),
          ),
          React.createElement(PlanSection, { icon: 'globe', eyebrow: 'Domain suggestions', title: 'Pick your web address', tone: 'secondary',
            action: React.createElement(Button, { variant: 'ghost', size: 'sm', iconRight: 'arrowRight', onClick: () => window.navigate('/app/domain') }, 'Domain') },
            React.createElement('div', { style: { display: 'flex', flexDirection: 'column', gap: 8 } },
              r.domains.map(d => React.createElement('button', { key: d.name, onClick: () => setSelDomain(d.name),
                style: { display: 'flex', alignItems: 'center', gap: 9, padding: '9px 11px', borderRadius: 'var(--r-sm)', cursor: 'pointer', textAlign: 'left', background: selDomain === d.name ? 'var(--primary-soft)' : 'var(--surface-2)', border: '1px solid ' + (selDomain === d.name ? 'var(--primary)' : 'var(--border)') } },
                React.createElement('div', { style: { width: 17, height: 17, borderRadius: 999, border: '2px solid ' + (selDomain === d.name ? 'var(--primary)' : 'var(--border-strong)'), display: 'flex', alignItems: 'center', justifyContent: 'center' } }, selDomain === d.name ? React.createElement('div', { style: { width: 8, height: 8, borderRadius: 999, background: 'var(--primary)' } }) : null),
                React.createElement('span', { style: { flex: 1, fontFamily: 'var(--font-mono)', fontSize: 12.5, fontWeight: 600 } }, d.name),
                React.createElement(Badge, { tone: d.badgeTone, size: 'sm' }, d.badge),
                React.createElement('span', { style: { fontSize: 12.5, fontWeight: 700 } }, '$' + d.price)))),
          ),
          React.createElement(PlanSection, { icon: 'rocket', eyebrow: 'Recommended hosting', title: r.hosting.provider, tone: 'info',
            action: React.createElement(Button, { variant: 'ghost', size: 'sm', iconRight: 'arrowRight', onClick: () => window.navigate('/app/infrastructure') }, 'Hosting') },
            React.createElement('p', { style: { fontSize: 13.5, color: 'var(--muted)', lineHeight: 1.5 } }, r.hosting.why),
            React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 } },
              React.createElement(Badge, { tone: 'success', icon: 'check' }, 'Automatic SSL'),
              React.createElement(Badge, { tone: 'secondary' }, r.hosting.cost)),
          ),
        ),
      ),

      React.createElement(Card, { pad: 24, style: { marginTop: 20, display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 20, flexWrap: 'wrap', background: 'var(--surface-2)' } },
        React.createElement('div', null,
          React.createElement('h3', { style: { fontSize: 18, fontWeight: 650 } }, 'Ready to build?'),
          React.createElement('p', { style: { fontSize: 14, color: 'var(--muted)', marginTop: 5 } }, 'Bizia will generate these pages and open the website builder so you can refine and publish.'),
        ),
        React.createElement('div', { style: { display: 'flex', gap: 10 } },
          React.createElement(Button, { variant: 'outline', icon: 'layoutTemplate', onClick: () => window.navigate('/app/templates') }, 'Choose template'),
          React.createElement(Button, { variant: 'primary', size: 'lg', icon: 'rocket', onClick: () => { window.toast({ title: 'Building your website', desc: 'Opening the builder.', tone: 'success' }); window.navigate('/app/builder'); } }, 'Build my website'),
        ),
      ),
      React.createElement('style', null, '@media(max-width:900px){.bz-plan-grid{grid-template-columns:1fr !important}}'),
    );
  }

  window.RecommendationPage = RecommendationPage;
})();