// Build Know How — homepage (dark teal, conversion-led). All sections + HomeApp.
const { Button, CoherenceStar, VideoEmbed, FiveDStrip, COHERENCE } =
  window.BuildKnowHowDesignSystem_dc7d1e;

const LINK = {
  snapshot: 'https://5d-snapshot.buildknowhow.net',
  briefing: 'https://freebusy.io/buildknowhow/5d-executive-briefing',
  skool: 'https://www.skool.com/the-build-know-how-collective-1268',
  skoolAbout: 'https://www.skool.com/the-build-know-how-collective-1268/about',
  linkedin: 'https://www.linkedin.com/in/oanagarcia/',
  email: 'mailto:oana.garcia@buildknowhow.net',
  site: 'https://buildknowhow.net',
  oana: 'https://oanagarcia.com',
  oanaBook: 'https://oanagarcia.com/book',
};
const Icon = ({ n }) => <i data-lucide={n}></i>;
const LinkedInIcon = () => (
  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
    <path d="M20.45 20.45h-3.55v-5.57c0-1.33-.02-3.04-1.85-3.04-1.85 0-2.14 1.45-2.14 2.94v5.67H9.36V9h3.41v1.56h.05c.47-.9 1.64-1.85 3.37-1.85 3.6 0 4.27 2.37 4.27 5.46v6.28zM5.34 7.43a2.06 2.06 0 1 1 0-4.12 2.06 2.06 0 0 1 0 4.12zM7.12 20.45H3.55V9h3.57v11.45zM22.22 0H1.77C.79 0 0 .77 0 1.73v20.54C0 23.23.79 24 1.77 24h20.45c.98 0 1.78-.77 1.78-1.73V1.73C24 .77 23.2 0 22.22 0z"/>
  </svg>
);

// skool wordmark — lowercase, bold, each letter its own colour (from the official logo).
const SKOOL_COLORS = ['#1E2E95', '#D94B3B', '#F2B50E', '#5FB4ED', '#D94B3B'];
const Skool = () => (
  <span className="hm-skool" aria-label="skool">
    {'skool'.split('').map((ch, i) => (
      <span key={i} style={{ color: SKOOL_COLORS[i] }}>{ch}</span>
    ))}
  </span>
);

// "FREE" tag — gift icon + bold FREE, opening a caption sentence.
const FreeTag = () => (
  <span className="hm-free"><i data-lucide="gift"></i><b>FREE</b></span>
);

// mini flag icons
const FlagUS = () => (
  <svg className="hm-flag" viewBox="0 0 28 20" aria-hidden="true">
    <rect width="28" height="20" rx="2.5" fill="#fff" />
    <g fill="#B22234">
      {[0, 2, 4, 6, 8, 10, 12].map((r) => <rect key={r} y={r * (20 / 13)} width="28" height={20 / 13} />)}
    </g>
    <rect width="12" height={20 / 13 * 7} fill="#3C3B6E" />
  </svg>
);
const FlagRO = () => (
  <svg className="hm-flag" viewBox="0 0 28 20" aria-hidden="true">
    <rect width="28" height="20" rx="2.5" fill="#FCD116" />
    <rect width="9.33" height="20" fill="#002B7F" />
    <rect x="18.67" width="9.33" height="20" fill="#CE1126" />
  </svg>
);
const FlagES = () => (
  <svg className="hm-flag" viewBox="0 0 28 20" aria-hidden="true">
    <rect width="28" height="20" rx="2.5" fill="#C60B1E" />
    <rect y="5" width="28" height="10" fill="#FFC400" />
  </svg>
);
const GlobeChip = () => (
  <span className="hm-globechip" aria-label="and more"><i data-lucide="globe"></i></span>
);

// The three primary calls to action — identical in the hero and the closing band.
function TriCtas({ onContact }) {
  return (
    <div className="hm-tri">
      <div className="hm-cta">
        <Button as="a" href={LINK.snapshot} variant="primary" size="lg" block iconRight={<Icon n="arrow-right" />}>
          5D Coherence Snapshot™
        </Button>
        <p className="hm-cta__cap"><FreeTag /> self-assessment, about 8 minutes, to see where you stand and where to start.</p>
      </div>
      <div className="hm-cta">
        <Button as="a" href={LINK.skoolAbout} variant="onDark" size="lg" block iconRight={<Icon n="arrow-up-right" />}>
          5D Live Sessions
        </Button>
        <p className="hm-cta__cap"><FreeTag /> weekly workshops inside The Build Know How Collective on <Skool />, applying the 5D Model to your real issue.</p>
      </div>
      <div className="hm-cta">
        <Button as="a" href={LINK.briefing} variant="onDark" size="lg" block>Book a Coherence Briefing™</Button>
        <p className="hm-cta__cap">90-minute structured strategic exploration designed to surface hidden performance tensions and clarify your next structural move <b className="hm-price">(€300)</b></p>
      </div>
    </div>
  );
}

function Header() {
  const nav = [['The Model', '#model'], ['How it works', '#process'], ['Community', '#community'], ['About', '#about']];
  return (
    <header className="hm-header">
      <div className="hm-wrap hm-header__in">
        <a className="hm-logo" href="#top">
          <img src="../../assets/bkh-logo.png" alt="Build Know How" />
          <span>Build Know How</span>
        </a>
        <nav className="hm-nav">{nav.map(([t, h]) => <a key={t} href={h}>{t}</a>)}</nav>
        <div className="hm-header__cta">
          <Button as="a" href={LINK.skool} variant="onDark" size="sm">Join the Collective</Button>
          <Button as="a" href={LINK.snapshot} variant="primary" size="sm" iconRight={<Icon n="arrow-right" />}>
            Coherence Snapshot™
          </Button>
        </div>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hm-hero" id="top">
      <div className="hm-wrap">
        <div className="hm-hero__grid">
          <div className="hm-hero__copy">
            <span className="hm-construction"><i data-lucide="construction"></i>Under construction</span>
            <span className="hm-eyebrow">5D Performance Model™</span>
            <h1 className="hm-h1">Performance<br/>Through Coherence™</h1>
            <p className="hm-lead hm-hero__lead">
              For growth-stage leaders scaling with data and AI — and carrying a full life
              at home. Build performance systems coherent enough for sustainable growth,
              without burning out your talent or yourself.
            </p>
          </div>
          <div className="hm-hero__portrait">
            <div className="hm-hero__circle">
              <img src="../../assets/oana-cutout.png" alt="Oana Garcia, Founder of the 5D Performance Model™" />
            </div>
            <figure className="hm-hero__badge">
              <span className="hm-hero__badge-ic"><Icon n="quote" /></span>
              <div>
                <p className="hm-hero__badge-quote">Success should expand your life,<br/>not consume it.</p>
                <span className="hm-hero__badge-name">Oana Garcia ·<br/>Founder 5D Performance Model™</span>
              </div>
            </figure>
          </div>
        </div>
        <div className="hm-hero__ctarow"><TriCtas /></div>
      </div>
    </section>
  );
}

function Symptoms() {
  const s = [
    ['rotate-ccw', 'Decisions reopened despite strong analysis'],
    ['cpu', 'AI outputs treated as authority, not hypothesis'],
    ['git-branch', 'Strategic pivots on incomplete interpretation'],
    ['calendar-clock', 'Meetings multiply while clarity thins'],
    ['gauge', 'Strong metrics masking structural strain'],
    ['waves', 'Data volume up while decision quality declines'],
  ];
  return (
    <section className="hm-section">
      <div className="hm-wrap">
        <div className="hm-head">
          <span className="hm-eyebrow">The pattern</span>
          <h2 className="hm-h2">Performance systems quietly fail before people do</h2>
        </div>
        <p className="hm-burnout">
          Burnout is not a resilience problem. It is a performance design flaw —
          <span> the visible symptom of an incoherent system.</span>
        </p>
        <div className="hm-symptoms">
          {s.map(([ic, t]) => (
            <div className="hm-symptom" key={t}>
              <span className="hm-symptom__ic"><Icon n={ic} /></span><p>{t}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Model() {
  return (
    <section className="hm-section hm-model" id="model">
      <div className="hm-wrap">
        <div className="hm-head hm-head--center">
          <span className="hm-eyebrow">The 5D Performance Star™</span>
          <h2 className="hm-h2">Coherence is the centre, not a side-effect</h2>
        </div>
        <div className="hm-model__grid">
          <div className="hm-model__star"><CoherenceStar size={440} /></div>
          <div>
            <p className="hm-lead">{COHERENCE.definition}</p>
            <div className="hm-states">
              <div className="hm-state hm-state--up">
                <h4><Icon n="trending-up" />When coherence is high</h4>
                <ul>{COHERENCE.high.map((x) => <li key={x}>{x}</li>)}</ul>
              </div>
              <div className="hm-state hm-state--down">
                <h4><Icon n="trending-down" />When coherence is low</h4>
                <ul>{COHERENCE.low.map((x) => <li key={x}>{x}</li>)}</ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Process({ onContact }) {
  const steps = [
    { n: '01', ic: 'scan-line', name: 'Diagnose', mark: 'Coherence Snapshot™',
      body: <>A free self-assessment — about 8 minutes — revealing structural signals across the five dimensions.</>,
      cta: 'FREE assessment', href: LINK.snapshot, variant: 'primary' },
    { n: '02', ic: 'calendar-check', name: 'Practice', mark: 'Free weekly workshops',
      body: <>Join free weekly sessions inside The Build Know How Collective on <Skool />, where we apply the 5D
        Performance Model™ live to a specific issue you bring.</>,
      cta: 'FREE Workshops', href: LINK.skoolAbout, variant: 'onDark' },
    { n: '03', ic: 'messages-square', name: 'Clarify', mark: 'Coherence Briefing™',
      body: <>90-minute structured strategic exploration designed to surface hidden performance tensions and clarify your next structural move <b className="hm-price">(€300)</b></>,
      cta: 'Book a session', href: LINK.briefing, variant: 'onDark' },
    { n: '04', ic: 'drafting-compass', name: 'Redesign', mark: 'Coherence Mapping™',
      body: <>Structured system redesign for durable scale and a sustained competitive edge. Let us know your
        current pain points and connect for an initial conversation and quote for advisory work.</>,
      cta: 'Connect', action: 'contact', variant: 'onDark' },
  ];
  return (
    <section className="hm-section" id="process">
      <div className="hm-wrap">
        <div className="hm-head hm-head--center">
          <span className="hm-eyebrow">How we redesign performance</span>
          <h2 className="hm-h2 hm-process__title">Diagnose · Practice · Clarify · Redesign</h2>
        </div>
        <div className="hm-steps hm-steps--4">
          {steps.map((s) => (
            <article className="hm-step" key={s.n}>
              <div className="hm-step__top">
                <span className="hm-step__n">{s.n}</span>
                <span className="hm-step__ic"><Icon n={s.ic} /></span>
              </div>
              <h3 className="hm-h3">{s.name}</h3>
              <p className="hm-step__mark">{s.mark}</p>
              <p className="body">{s.body}</p>
              {s.action === 'contact'
                ? <Button variant={s.variant} size="sm" iconRight={<Icon n="arrow-right" />} onClick={onContact}>{s.cta}</Button>
                : <Button as="a" href={s.href} variant={s.variant} size="sm" iconRight={<Icon n="arrow-right" />}>{s.cta}</Button>}
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Community() {
  const cards = [
    ['dumbbell', 'AI Gym', <>A free, practical weekly workshop. Bring a real problem; leave with a working AI approach you can use right away.</>, [['Weekly', ''], ['Free', ''], ['EN', 'en'], ['RO', 'ro']]],
    ['activity', '5D Live Sessions', <>Each week we apply the 5D Performance Model™ live to a participant’s business — real coherence work, in the open.</>, [['Weekly', ''], ['Free', ''], ['EN', 'en'], ['RO', 'ro']]],
    ['users-round', 'Entrepreneurs’ Circle', <>A weekly meetup to bounce ideas, find accountability partners, and grow alongside other founders.</>, [['Weekly', ''], ['Peer support', ''], ['EN', 'en']]],
    ['heart-handshake', 'Cluj-Napoca local', <>Family and community activities in the Cluj-Napoca area — performance and life, designed to coexist.</>, [['In person', ''], ['Cluj-Napoca', ''], ['Multilingual', 'multi']]],
  ];
  const flagFor = (mod) => mod === 'en' ? <FlagUS /> : mod === 'ro' ? <FlagRO />
    : mod === 'multi' ? <span className="hm-flagset"><FlagUS /><FlagRO /><FlagES /><GlobeChip /></span> : null;
  return (
    <section className="hm-section hm-model" id="community">
      <div className="hm-wrap">
        <div className="hm-head">
          <span className="hm-eyebrow">The Build Know How Collective</span>
          <h2 className="hm-h2">Join a global community designed for coherence</h2>
          <p className="hm-lead">Free weekly rooms on <Skool /> where ambitious, thoughtful leaders practise —
            in English and Romanian — plus local gatherings for families and founders.</p>
        </div>
        <div className="hm-comm__grid">
          {cards.map(([ic, t, body, tags]) => (
            <div className="hm-comm__card" key={t}>
              <div className="hm-comm__top">
                <span className="hm-comm__ic"><Icon n={ic} /></span>
                <h3 className="hm-h3">{t}</h3>
              </div>
              <p>{body}</p>
              <div className="hm-tags">
                {tags.map(([lab, mod], k) => (
                  <span key={k} className={'hm-tag' + (mod ? ' hm-tag--' + mod : '')}>{flagFor(mod)}{lab}</span>
                ))}
              </div>
            </div>
          ))}
          <div className="hm-comm__card hm-comm__card--wide" style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 28, alignItems: 'center' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
              <h3 className="hm-h3">One room. Two languages. Real practice.</h3>
              <p>The AI Gym and 5D Live Sessions each run twice a week — one in English, one in Romanian —
                so you can learn and contribute in the language you think best in. It’s free to join.</p>
              <div className="hm-actions">
                <Button as="a" href={LINK.skoolAbout} variant="primary" size="lg" iconRight={<Icon n="arrow-up-right" />}>
                  Join the Collective on Skool
                </Button>
              </div>
            </div>
            <VideoEmbed title="Inside the Collective" label="60-sec tour — AI Gym, 5D Sessions & the Circle" duration="1:00" />
          </div>
        </div>
      </div>
    </section>
  );
}

function Watch() {
  const vids = [
    ['What is the 5D Performance Model™?', '3-min explainer of the Star and Coherence', '2:48', '16 / 9'],
    ['The Coherence Snapshot™, explained', 'What the free 8-minute self-assessment reveals', '1:40', '16 / 9'],
    ['On stage: Performance Through Coherence', 'Speaker reel — keynote & workshop moments', '2:05', '16 / 9'],
  ];
  return (
    <section className="hm-section">
      <div className="hm-wrap">
        <div className="hm-head hm-head--center">
          <span className="hm-eyebrow">Watch</span>
          <h2 className="hm-h2 hm-watch__title">See the thinking in motion</h2>
        </div>
        <div className="hm-watch__grid">
          {vids.map(([t, l, d, a]) => <VideoEmbed key={t} title={t} label={l} duration={d} aspect={a} />)}
        </div>
      </div>
    </section>
  );
}

function Founder() {
  return (
    <section className="hm-section hm-model" id="about">
      <div className="hm-wrap">
        <div className="hm-founder__grid">
          <div className="hm-founder__col">
            <span className="hm-eyebrow">Founder, 5D Performance Model™</span>
            <div className="hm-founder__name">
              <img className="hm-founder__avatar" src="../../assets/oana-cutout.png" alt="Oana Garcia" />
              <h2 className="hm-h2">Oana Garcia</h2>
            </div>
            <p className="hm-founder__role">Executive Advisor on Performance &amp; Decision Systems</p>
            <p className="hm-lead">Two decades across global financial institutions and consulting — corporate
              banking, analytics, data governance and decision-system design within Citi, HSBC and Allianz
              Global Investors, with advisory roles across EY and PwC, in more than 30 countries.</p>
          </div>
          <div>
            <VideoEmbed title="Why I built the 5D Performance Model™"
              label="90-sec founder story — leading while parenting, and the cost of incoherence" duration="1:35" aspect="16 / 9" />
          </div>
        </div>
        <p className="hm-founder__quote hm-founder__quote--wide">High-performing organizations often erode the very talent and
          clarity they depend on — not because people lack resilience, but because performance systems
          lack coherence.</p>
        <div className="hm-actions hm-founder__actions">
          <Button as="a" href={LINK.linkedin} variant="onDark" iconLeft={<LinkedInIcon />}>Connect on LinkedIn</Button>
          <Button as="a" href={LINK.oana} variant="onDark" className="hm-btn-teal" iconLeft={<Icon n="globe" />}>oanagarcia.com</Button>
          <Button as="a" href={LINK.oanaBook} variant="primary" iconRight={<Icon n="arrow-right" />}>Book Oana</Button>
        </div>
      </div>
    </section>
  );
}

function CategoryClose() {
  return (
    <section className="hm-section hm-close">
      <div className="hm-wrap">
        <span className="hm-eyebrow">Begin where leverage is highest</span>
        <blockquote className="hm-signature">Success should <br className="hm-sig-br"/>expand your life, <br className="hm-sig-br"/>not consume it.</blockquote>
        <div className="hm-hero__ctarow"><TriCtas /></div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="hm-footer">
      <div className="hm-wrap hm-footer__in">
        <a className="hm-logo" href="#top">
          <img src="../../assets/bkh-logo.png" alt="Build Know How" />
          <span>Build Know How</span>
        </a>
        <nav className="hm-footer__links">
          <a href={LINK.snapshot}>Coherence Snapshot™</a>
          <a href={LINK.skool}>The Collective</a>
          <a href={LINK.linkedin}>LinkedIn</a>
          <a href={LINK.site}>Terms</a>
          <a href={LINK.site}>Privacy</a>
        </nav>
        <p className="hm-footer__fine">© 2026 Synergetic Solutions by Build Know How SRL. All Rights Reserved.
          Founder: Oana Garcia · Executive Advisor on Performance &amp; Decision Systems.</p>
      </div>
    </footer>
  );
}

const EMPTY_FORM = { fullName: '', email: '', whatsapp: '', website: '', objective: '', preferredTime: '', preferredMethod: 'Email' };

function ContactModal({ open, onClose }) {
  const [form, setForm] = React.useState(EMPTY_FORM);
  const [status, setStatus] = React.useState('idle'); // idle | sending | done | error
  React.useEffect(() => {
    if (!open) { setStatus('idle'); setForm(EMPTY_FORM); }
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    if (open) document.addEventListener('keydown', onKey);
    return () => document.removeEventListener('keydown', onKey);
  }, [open]);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  if (!open) return null;
  const set = (k) => (e) => setForm((f) => ({ ...f, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setStatus('sending');
    try {
      const r = await fetch('/api/contact', {
        method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(form),
      });
      if (!r.ok) throw new Error('bad status');
      setStatus('done');
    } catch (err) { setStatus('error'); }
  };
  const mailtoFallback = `mailto:oana.garcia@buildknowhow.net?subject=${encodeURIComponent('5D inquiry — ' + form.fullName)}&body=${encodeURIComponent(
    `Full name: ${form.fullName}\nEmail: ${form.email}\nWhatsApp: ${form.whatsapp}\nWebsite: ${form.website}\nObjective: ${form.objective}\nPreferred time: ${form.preferredTime}\nPreferred method: ${form.preferredMethod}`)}`;

  return (
    <div className="hm-modal__overlay" onClick={onClose}>
      <div className="hm-modal" role="dialog" aria-modal="true" aria-label="Start a conversation" onClick={(e) => e.stopPropagation()}>
        <button className="hm-modal__close" onClick={onClose} aria-label="Close"><i data-lucide="x"></i></button>
        {status === 'done' ? (
          <div className="hm-modal__done">
            <span className="hm-modal__check"><i data-lucide="check"></i></span>
            <h3 className="hm-h3">Your details are on their way</h3>
            <p>We’ve emailed a copy to <b>{form.email}</b> and to Oana. Keep that email as your record of what you submitted.</p>
            <p className="hm-modal__note">If you don’t hear back within <b>5 business days</b>, please forward your
              confirmation email to <a href="mailto:oana.garcia@buildknowhow.net">oana.garcia@buildknowhow.net</a> so it doesn’t slip through.</p>
            <Button variant="primary" onClick={onClose}>Done</Button>
          </div>
        ) : (
          <form className="hm-modal__form" onSubmit={submit}>
            <div className="hm-modal__head">
              <span className="hm-eyebrow">Coherence Mapping™</span>
              <h3 className="hm-h3">Start a conversation</h3>
              <p className="hm-modal__sub">Tell us where you are and what you’re solving. You’ll receive a copy of your
                submission by email, and Oana will follow up personally.</p>
            </div>
            <div className="hm-modal__grid">
              <div className="hm-field"><label>Full name *</label>
                <input required value={form.fullName} onChange={set('fullName')} placeholder="Jane Doe" /></div>
              <div className="hm-field"><label>Email address *</label>
                <input required type="email" value={form.email} onChange={set('email')} placeholder="jane@company.com" /></div>
              <div className="hm-field"><label>WhatsApp number</label>
                <input value={form.whatsapp} onChange={set('whatsapp')} placeholder="+1 555 000 0000" /></div>
              <div className="hm-field"><label>Business website</label>
                <input value={form.website} onChange={set('website')} placeholder="company.com" /></div>
            </div>
            <div className="hm-field"><label>What would you like help with? *</label>
              <textarea required rows="3" value={form.objective} onChange={set('objective')}
                placeholder="The objective or tension you think Oana can help with." /></div>
            <div className="hm-modal__grid">
              <div className="hm-field"><label>Preferred time to reach you</label>
                <input value={form.preferredTime} onChange={set('preferredTime')} placeholder="e.g. weekday mornings CET" /></div>
              <div className="hm-field"><label>Preferred method</label>
                <select value={form.preferredMethod} onChange={set('preferredMethod')}>
                  <option>Email</option><option>WhatsApp</option><option>Phone call</option><option>Video call</option>
                </select></div>
            </div>
            {status === 'error' && (
              <p className="hm-modal__err">We couldn’t send that automatically. You can
                {' '}<a href={mailtoFallback}>send it by email instead</a>, and we’ll take it from there.</p>
            )}
            <div className="hm-actions">
              <Button type="submit" variant="primary" size="lg" block disabled={status === 'sending'}
                iconRight={status === 'sending' ? null : <Icon n="send" />}>
                {status === 'sending' ? 'Sending…' : 'Submit'}
              </Button>
            </div>
            <p className="hm-modal__fine">By submitting you agree to be contacted about your inquiry. We never share your details.</p>
          </form>
        )}
      </div>
    </div>
  );
}

function HomeApp() {
  const [contactOpen, setContactOpen] = React.useState(false);
  React.useEffect(() => { window.lucide && window.lucide.createIcons(); });
  return (
    <div className="hm-root">
      <Header /><Hero /><Symptoms /><Model /><Process onContact={() => setContactOpen(true)} />
      <Community /><Watch /><CategoryClose /><Founder /><Footer />
      <ContactModal open={contactOpen} onClose={() => setContactOpen(false)} />
    </div>
  );
}
window.HomeApp = HomeApp;