// parts.jsx — small reusable bits for Initiative landing

// Recurring arrow motif. variant: 'line' (long shaft) or 'short'
function ArrowMark({ size = 16, variant = 'short', color = 'currentColor', strokeWidth = 1 }) {
  const w = variant === 'line' ? size * 3 : size;
  return (
    <svg width={w} height={size} viewBox={`0 0 ${w} ${size}`} fill="none"
         stroke={color} strokeWidth={strokeWidth} strokeLinecap="square">
      <line x1="0" y1={size/2} x2={w - size*0.4} y2={size/2} />
      <polyline points={`${w - size*0.55},${size*0.18} ${w - size*0.05},${size/2} ${w - size*0.55},${size*0.82}`} />
    </svg>
  );
}

// Diamond-eye wordmark mark for the logo
function Wordmark({ tone = 'dark' }) {
  const c = tone === 'dark' ? '#f4efe6' : '#0e0e0c';
  return (
    <span className="wm" style={{color: c}}>
      <svg width="22" height="22" viewBox="0 0 22 22" fill="none" stroke="var(--gold)" strokeWidth="1.2">
        <rect x="1" y="1" width="20" height="20" />
        <path d="M5 11 L11 5 L17 11 L11 17 Z" />
        <line x1="11" y1="5" x2="11" y2="17" stroke="var(--gold)" strokeWidth=".8" />
      </svg>
      <span>Initiative<em>.</em></span>
    </span>
  );
}

function Eyebrow({ children }) {
  return <span className="eyebrow">{children}</span>;
}

// ─── Nav ────────────────────────────────────────────────────────────────────
function Nav() {
  const [onDark, setOnDark] = React.useState(true);
  React.useEffect(() => {
    const onScroll = () => {
      const hero = document.querySelector('.hero');
      if (!hero) return;
      const r = hero.getBoundingClientRect();
      setOnDark(r.bottom > 64);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={onDark ? 'nav on-dark' : 'nav'}>
      <div className="wrap nav-inner">
        <a href="#top" aria-label="Initiative">
          <Wordmark tone={onDark ? 'dark' : 'light'} />
        </a>
        <div className="nav-links">
          <a href="#capital">Capital</a>
          <a href="#advisory">Advisory</a>
          <a href="#approach">Approach</a>
          <a href="#portfolio">Portfolio</a>
          <a href="#contact">Contact</a>
        </div>

      </div>
    </nav>
  );
}

// ─── Hero ───────────────────────────────────────────────────────────────────
function Hero({ headline, sub }) {
  return (
    <header className="hero" id="top">
      <div className="hero-grid" />
      <div className="hero-glow" />
      <div className="wrap">
        <div className="hero-meta">
          <div className="left">
            <span>Luxembourg · Est. 2012</span>
            <span>Holding · Advisory</span>
          </div>
          <div></div>
        </div>

        <h1 dangerouslySetInnerHTML={{ __html: headline }} />

        <div className="hero-sub">
          <p>{sub}</p>
          <div className="hero-cta">
            <a href="#contact" className="hero-btn">
              Bring us your initiative
              <span className="arrow-anim"><ArrowMark size={14} color="#0e0e0c" strokeWidth={1.4} /></span>
            </a>
            <a href="#capital" className="hero-btn-2">See how we partner ↓</a>
          </div>
        </div>

        <div className="hero-stats">
          <div>
            <div className="num"><em>16</em></div>
            <div className="lbl">Selective investments</div>
          </div>
          <div>
            <div className="num">€<em>100</em>k</div>
            <div className="lbl">Average ticket size</div>
          </div>
          <div>
            <div className="num"><em>14</em>yrs</div>
            <div className="lbl">Operating from Luxembourg</div>
          </div>
          <div>
            <div className="num"><em>5</em></div>
            <div className="lbl">Industry sectors</div>
          </div>
        </div>
      </div>
    </header>
  );
}

// ─── Two-arm split ──────────────────────────────────────────────────────────
function Arms({ tone }) {
  return (
    <section id="capital">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="idx">01 / Two arms, one thesis</div>
          </div>
          <div>
            <h2>We hold long-term <em>positions</em>—and we sit at the table while you build them out.</h2>
            <p className="lede">{tone === 'institutional'
              ? 'A privately-held vehicle pairing patient capital with operating counsel. We invest in technology businesses where we can also be useful in person.'
              : 'Capital alone rarely changes the trajectory of a company. We pair it with the rare thing founders actually want—operators who have built and scaled before, on the bench when it matters.'}</p>
          </div>
        </div>

        <div className="arms">
          <div className="arm">
            <div className="arm-num"><span>I.</span><ArrowMark size={14} color="var(--gold)" /></div>
            <h3>Capital that <em>stays</em>.</h3>
            <p>Direct investments and co-investments into European, UK and US technology companies, from late-seed to growth. Holding-company structure means we don't operate to a fund clock.</p>
            <ul className="arm-list">
              <li><span>Cheque size</span><span>€50k — €250k</span></li>
              <li><span>Stage</span><span>Seed → Series B</span></li>
              <li><span>Hold horizon</span><span>5 — 10 yrs</span></li>
              <li><span>Sectors</span><span>B2B SaaS · AI · Fintech infra</span></li>
            </ul>
            <a href="#portfolio" className="arm-link">See the portfolio <span className="arrow-anim"><ArrowMark size={12} color="currentColor" /></span></a>
          </div>

          <div className="arm">
            <div className="arm-num"><span>II.</span><ArrowMark size={14} color="var(--gold)" /></div>
            <h3>Counsel that <em>operates</em>.</h3>
            <p>Advisory and consulting for scale-ups and corporates. Strategy, board work, AI implementation, and product & technical execution—delivered by the same operators who run our investments.</p>
            <ul className="arm-list">
              <li><span>Engagements</span><span>3 — 12 months</span></li>
              <li><span>Format</span><span>Embedded · Retainer · Project</span></li>
              <li><span>Clients</span><span>Scale-ups · Corporates · Boards</span></li>
              <li><span>Practice areas</span><span>6 disciplines</span></li>
            </ul>
            <a href="#advisory" className="arm-link">Browse the practice <span className="arrow-anim"><ArrowMark size={12} color="currentColor" /></span></a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Advisory grid ──────────────────────────────────────────────────────────
const ADVISORY = [
  { idx: '01', title: 'Growth & Strategy',
    desc: 'Market entry, GTM redesign, pricing, and the unglamorous quarter-by-quarter work of moving the right numbers.',
    tags: ['Positioning', 'GTM', 'Pricing', 'KPIs'] },
  { idx: '02', title: 'Board Advisory',
    desc: 'Independent board seats, observer roles, and pre-board diligence for founders preparing to raise or sell.',
    tags: ['Board seat', 'Observer', 'Governance'] },
  { idx: '03', title: 'Transformative Consulting',
    desc: 'Internal restructures, operating model redesign, and the post-merger integration nobody wants to run.',
    tags: ['Org design', 'Op model', 'PMI'] },
  { idx: '04', title: 'AI Implementation',
    desc: 'Practical deployment of AI inside operating workflows—not slideware. Vendor selection, evals, and the shipping of it.',
    tags: ['Eval', 'Tooling', 'Rollout'] },
  { idx: '05', title: 'Process Automation',
    desc: 'Operational automation across finance, ops, and customer-facing flows. Measured by hours returned, not licences sold.',
    tags: ['Workflow', 'Integrations', 'RPA'] },
  { idx: '06', title: 'Product & Technical Execution',
    desc: 'Embedded product and engineering leadership for scale-ups missing a CTO, and corporates spinning up new ventures.',
    tags: ['Product', 'Engineering', 'Architecture'] },
];

function Advisory() {
  return (
    <section id="advisory">
      <div className="wrap">
        <div className="sec-head">
          <div>
            <div className="idx">02 / Advisory practice</div>
          </div>
          <div>
            <h2>Six <em>disciplines</em>. Operators—not slide-makers.</h2>
            <p className="lede">Every engagement is led by a partner who has shipped the work before. We staff small, work in the room, and leave the team stronger than we found it.</p>
          </div>
        </div>

        <div className="adv-grid">
          {ADVISORY.map((a) => (
            <article key={a.idx} className="adv-card">
              <div className="adv-num">
                <span>{a.idx} ·  Practice</span>
                <span className="adv-arrow"><ArrowMark size={14} color="var(--gold)" /></span>
              </div>
              <h4>{a.title}</h4>
              <p>{a.desc}</p>
              <div className="adv-tags">
                {a.tags.map((t) => <span key={t}>{t}</span>)}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Numbers ────────────────────────────────────────────────────────────────
function Numbers() {
  return (
    <section className="numbers" id="numbers">
      <div className="wrap">
        <div className="sec-head">
          <div><div className="idx">03 / Track record</div></div>
          <div>
            <h2>A small ledger we are <em>proud</em> to keep public.</h2>
          </div>
        </div>
        <div className="num-grid">
          <div className="num-cell">
            <div className="lbl">Aggregate ARR built</div>
            <div className="big">€<em>180</em>m</div>
            <div className="desc">Across portfolio + advisory clients in the last 36 months.</div>
          </div>
          <div className="num-cell">
            <div className="lbl">Realised exits</div>
            <div className="big"><em>4</em></div>
            <div className="desc">Trade sales and secondary exits since 2021. Two strategic, two PE.</div>
          </div>
          <div className="num-cell">
            <div className="lbl">Median IRR</div>
            <div className="big"><em>27</em>%</div>
            <div className="desc">Net of fees, across realised positions held ≥ 24 months.</div>
          </div>
          <div className="num-cell">
            <div className="lbl">Operator partners</div>
            <div className="big"><em>9</em></div>
            <div className="desc">Founders, CTOs, and operators on the bench. Not a marketplace.</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Approach ───────────────────────────────────────────────────────────────
function Approach() {
  const steps = [
    { n: '01', t: 'Listen', m: 'Week 0 — 1', d: 'A short, direct diagnostic. We read your last two board decks, talk to the team, and tell you whether we should keep going.' },
    { n: '02', t: 'Frame', m: 'Week 2 — 3', d: 'A written frame: the two or three decisions that actually matter, the constraints we are working inside, and what good looks like in 90 days.' },
    { n: '03', t: 'Ship', m: 'Week 4 — 12', d: 'Embedded. We sit in your operating cadence, draft the first version of the work, and hand it off only when the team can hold it.' },
    { n: '04', t: 'Hold', m: 'Quarter+ ', d: 'Either we invest, we stay on the board, or we exit cleanly. We do not bill for being around.' },
  ];
  return (
    <section id="approach">
      <div className="wrap">
        <div className="sec-head">
          <div><div className="idx">04 / How we work</div></div>
          <div>
            <h2>A single, <em>unhurried</em> operating motion.</h2>
            <p className="lede">No pitch theatre. No 80-page decks. We start with a frame and ship from there.</p>
          </div>
        </div>
        <div className="approach-list">
          {steps.map((s) => (
            <div className="approach-row" key={s.n}>
              <div className="step">{s.n}</div>
              <h5>{s.t}<em>.</em></h5>
              <p>{s.d}</p>
              <div className="meta">{s.m}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Portfolio strip ────────────────────────────────────────────────────────
function Portfolio() {
  const items = [
    ['Zenchef', 'Foodtech'],
    ['causaLens', 'AI Digital Workers'],
    ['The Family', 'Investment Firm'],
  ];
  const all = [...items, ...items];
  return (
    <section id="portfolio" style={{padding:'0'}}>
      <div className="port">
        <div className="wrap" style={{paddingBottom: 32}}>
          <div className="eyebrow">Selected portfolio</div>
        </div>
        <div className="port-track">
          {all.map((it, i) => (
            <div className="port-item" key={i}>
              <span>{String((i % items.length) + 1).padStart(2,'0')}</span>
              <span style={{fontFamily:'var(--serif)', fontSize:'inherit', color:'var(--ink)'}}>{it[0]}<em> ↗</em></span>
              <span>{it[1]}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Contact ────────────────────────────────────────────────────────────────
function Contact() {
  const [submitted, setSubmitted] = React.useState(false);
  return (
    <section className="contact" id="contact">
      <div className="wrap">
        <div className="eyebrow" style={{color:'rgba(244,239,230,.55)'}}>05 / Get in touch</div>
        <h2>Bring us the <em>initiative</em>.<br/>We will tell you, plainly, if we can help.</h2>

        <div className="contact-grid">
          <form className="contact-form" onSubmit={(e) => {
            e.preventDefault();
            const f = new FormData(e.currentTarget);
            const name = (f.get('name') || '').toString().trim();
            const company = (f.get('company') || '').toString().trim();
            const email = (f.get('email') || '').toString().trim();
            const topic = (f.get('topic') || '').toString().trim();
            const context = (f.get('context') || '').toString().trim();
            const subject = topic ? `Initiative enquiry — ${topic}` : 'Initiative enquiry';
            const body = [
              `Name: ${name}`,
              `Company: ${company}`,
              `Email: ${email}`,
              `Topic: ${topic}`,
              '',
              'Context:',
              context,
            ].join('\n');
            window.location.href = `mailto:contact@initiative.lu?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
            setSubmitted(true);
          }}>
            <div className="contact-row">
              <label>Name</label>
              <input type="text" name="name" placeholder="Your name" />
            </div>
            <div className="contact-row">
              <label>Company</label>
              <input type="text" name="company" placeholder="Company / fund" />
            </div>
            <div className="contact-row">
              <label>Email</label>
              <input type="email" name="email" placeholder="you@company.com" />
            </div>
            <div className="contact-row">
              <label>I'm here for</label>
              <select name="topic" defaultValue="Investment — pitching for capital">
                <option>Investment — pitching for capital</option>
                <option>Advisory — strategy or board</option>
                <option>Advisory — AI / automation</option>
                <option>Advisory — product & technical</option>
                <option>Co-investment / LP enquiry</option>
                <option>Something else</option>
              </select>
            </div>
            <div className="contact-row" style={{alignItems:'start'}}>
              <label style={{paddingTop:8}}>Context</label>
              <textarea name="context" placeholder="A few lines on what you're working on. Links welcome." rows={3} />
            </div>
            <button type="submit" className="contact-submit">
              {submitted ? 'Sent — we will respond within 48h' : 'Send'}
              <span className="arrow-anim"><ArrowMark size={14} color="#0e0e0c" strokeWidth={1.4} /></span>
            </button>
          </form>

          <aside className="contact-aside">
            <div className="contact-card">
              <div className="k">Direct</div>
              <div className="v"><em>—</em> the partners read this inbox.</div>
              <a href="mailto:contact@initiative.lu">contact@initiative.lu</a>
              <a href="tel:+352278586507">+352 278 58 65 070</a>
            </div>
            <div className="contact-card">
              <div className="k">Office</div>
              <div className="v">78 avenue de la Liberté<br/>L–1930 Luxembourg</div>
            </div>
          </aside>
        </div>
      </div>
    </section>
  );
}

// ─── Footer ─────────────────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="ftr">
      <div className="wrap">
        <div className="ftr-top">
          <div className="ftr-brand">
            <Wordmark tone="dark" />
            <p>A Luxembourg-based holding pairing patient capital with operating counsel for European, UK and US technology companies.</p>
          </div>
          <div>
            <h6>Capital</h6>
            <ul>
              <li><a href="#capital">Investment thesis</a></li>
              <li><a href="#portfolio">Portfolio</a></li>
              <li><a href="#numbers">Track record</a></li>
              <li><a href="#contact">Co-invest</a></li>
            </ul>
          </div>
          <div>
            <h6>Advisory</h6>
            <ul>
              <li><a href="#advisory">Growth & Strategy</a></li>
              <li><a href="#advisory">Board Advisory</a></li>
              <li><a href="#advisory">AI Implementation</a></li>
              <li><a href="#advisory">Product & Technical</a></li>
            </ul>
          </div>
          <div>
            <h6>House</h6>
            <ul>
              <li><a href="#approach">Approach</a></li>
              <li><a>Operator network</a></li>
              <li><a>Press</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
        </div>
        <div className="ftr-bot">
          <div className="ftr-legal">
            <strong>Initiative S.A.</strong> · 78 avenue de la Liberté, L–1930 Luxembourg ·
            R.C.S. Luxembourg B170556 · TVA LU26703232.
            <br/>© 2012 — 2026 All rights reserved.
          </div>
          <div style={{display:'flex',gap:24,flexShrink:0}}>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { ArrowMark, Wordmark, Eyebrow, Nav, Hero, Arms, Advisory, Numbers, Approach, Portfolio, Contact, Footer });