/* global React */
const { useState, useEffect } = React;

// =========================================================================
// Image library — hotlinked from the live keltracapital.com plus a few
// editorial-vibe fallbacks. Anything starting with https://www.keltracapital.com
// is the client's own asset.
// =========================================================================
const IMG = {
  heroFarm:    "https://www.keltracapital.com/images/1650f96e-9772-408f-8af0-14a4e5e23176.avif",
  heroHills:   "https://www.keltracapital.com/images/6f75a540-1f3f-4645-926d-11617895be07.avif",
  hillsLayer:  "https://www.keltracapital.com/images/2nd-layer-img-real-estate-2.png",
  tea1:        "https://www.keltracapital.com/images/2nd-layer-img-tea-plantion-1.png",
  tea2:        "https://www.keltracapital.com/images/2nd-layer-img-tea-plantion-2-n.png",
  farm:        "https://www.keltracapital.com/images/2nd-layer-img-farm-1-n.png",
  exec:        "https://www.keltracapital.com/images/2nd-layer-img-executive-1.png",
  finance:     "https://www.keltracapital.com/images/2nd-layer-finance-1-n.png",
  greenhouse:  "https://www.keltracapital.com/images/3rd-layer-img-1-3-n.png",
  forestry:    "https://www.keltracapital.com/images/3rd-layer-img-1-4-n.png",
  specialty:   "https://www.keltracapital.com/images/3rd-layer-img-1-8-n.png",
  equities:    "https://www.keltracapital.com/images/4th-layer-img-2.png",
  realEstate:  "https://www.keltracapital.com/images/4th-layer-img-3.png",
  alt:         "https://www.keltracapital.com/images/4th-layer-img-4.png",
  stockEx:     "https://www.keltracapital.com/images/5th-layer-img-1-p-800.png",
  property:    "https://www.keltracapital.com/images/5th-layer-img-2-p-800.png",
  plantations: "https://www.keltracapital.com/images/5th-layer-img-4-p-800.png",
  alternatives:"https://www.keltracapital.com/images/5th-layer-img-5-p-1080.png",
  reports:     "https://www.keltracapital.com/images/9973b959-99a2-46fd-b078-819cf22cd04a.avif",
};

// =========================================================================
// Annunciator — live-feeling market ticker strip above the nav
// =========================================================================
function KxAnnunciator() {
  return (
    <div className="kx-anc">
      <div className="kx-anc__inner">
        <div className="kx-anc__group">
          <span className="kx-anc__item"><span>CSE ASPI</span><b>11,842.30</b><span className="kx-anc__pos">+0.42%</span></span>
          <span className="kx-anc__sep" />
          <span className="kx-anc__item"><span>S&P 500</span><b>6,184.10</b><span className="kx-anc__pos">+0.18%</span></span>
          <span className="kx-anc__sep" />
          <span className="kx-anc__item"><span>Tea Auction</span><b>$3.42 / kg</b><span className="kx-anc__neg">−1.1%</span></span>
        </div>
        <div className="kx-anc__group">
          <span>23 May 2026 · Colombo</span>
        </div>
      </div>
    </div>
  );
}

// =========================================================================
// Navigation
// =========================================================================
function KxNav({ current, onNav }) {
  const links = ["Firm", "Strategies", "Plantations", "Insights", "Contact"];
  return (
    <>
      <KxAnnunciator />
      <nav className="kx-nav">
        <div className="kx-nav__inner">
          <div className="kx-nav__brand" onClick={() => onNav("Home")}>
            <span className="kx-nav__wm">KELTRA</span>
            <span className="kx-nav__sub">CAPITAL</span>
          </div>
          <div className="kx-nav__links">
            {links.map(l => (
              <button
                key={l}
                className={"kx-nav__link" + (current === l ? " kx-nav__link--active" : "")}
                onClick={() => onNav(l)}
              >{l}</button>
            ))}
          </div>
          <button className="kx-nav__cta">Investor Portal</button>
        </div>
      </nav>
    </>
  );
}

// =========================================================================
// Hero
// =========================================================================
function KxHero({ image, eyebrow, headHtml, lede, ctas, chrome }) {
  return (
    <section className="kx-hero">
      <div className="kx-hero__bg"><img src={image} alt="" /></div>
      <div className="kx-hero__inner">
        <div className="kx-eyebrow">{eyebrow}</div>
        <h1 className="kx-hero__head" dangerouslySetInnerHTML={{__html: headHtml}} />
        <p className="kx-hero__lede">{lede}</p>
        <div className="kx-hero__row">{ctas}</div>
      </div>
      <div className="kx-hero__chrome">
        <span>{chrome?.[0] || "EST. MCMLXXXVII"}</span>
        <span className="kx-hero__chrome--right">
          <span>{chrome?.[1] || "Stewarding wealth"}</span>
          <span>{chrome?.[2] || "Compounding value"}</span>
        </span>
      </div>
    </section>
  );
}

// =========================================================================
// Marquee under hero — 5 numerical stats
// =========================================================================
function KxMarquee({ stats }) {
  return (
    <div className="kx-marquee">
      <div className="kx-marquee__inner">
        {stats.map((s, i) => (
          <div className="kx-marquee__stat" key={i}>
            <div className="kx-marquee__lbl">{s.label}</div>
            <div className="kx-marquee__fig" dangerouslySetInnerHTML={{__html: s.figure}} />
          </div>
        ))}
      </div>
    </div>
  );
}

// =========================================================================
// Section helpers
// =========================================================================
function KxSection({ tone = "default", children, padTop, padBot }) {
  const cls = "kx-section " + (tone === "ivory" ? "kx-section--ivory" : tone === "paper" ? "kx-section--paper" : tone === "forest" ? "kx-section--forest" : "");
  const style = {};
  if (padTop != null) style.paddingTop = padTop;
  if (padBot != null) style.paddingBottom = padBot;
  return <section className={cls} style={style}><div className="kx-container">{children}</div></section>;
}

function KxSectionHead({ eyebrow, title, intro }) {
  return (
    <div className="kx-secthead">
      <div>
        {eyebrow ? <div className="kx-eyebrow" style={{color: "var(--brass-700)"}}>{eyebrow}</div> : null}
        <h2 className="kx-secthead__title" dangerouslySetInnerHTML={{__html: title}} />
      </div>
      {intro ? <p className="kx-secthead__intro">{intro}</p> : null}
    </div>
  );
}

// =========================================================================
// Pillars — 4 large cards in 2×2
// =========================================================================
function KxPillars({ items, onPick }) {
  return (
    <div className="kx-pillars">
      {items.map(p => (
        <article className="kx-pillar" key={p.name} onClick={() => onPick && onPick(p)}>
          <div className="kx-pillar__bg"><img src={p.image} alt="" /></div>
          <div className="kx-pillar__body">
            <div className="kx-pillar__num">{p.num}</div>
            <h3 className="kx-pillar__name" dangerouslySetInnerHTML={{__html: p.name}} />
            <p className="kx-pillar__desc">{p.desc}</p>
            <div className="kx-pillar__cta">{p.cta || "View strategy"}</div>
          </div>
        </article>
      ))}
    </div>
  );
}

// =========================================================================
// Split — image + text, alternating
// =========================================================================
function KxSplit({ image, caption, eyebrow, title, lede, body, reverse, cta }) {
  return (
    <div className={"kx-split" + (reverse ? " kx-split--reverse" : "")}>
      <div className="kx-split__media">
        <img src={image} alt="" />
        {caption ? <div className="kx-split__media-cap">{caption}</div> : null}
      </div>
      <div className="kx-split__body">
        {eyebrow ? <div className="kx-eyebrow" style={{color: "var(--brass-700)"}}>{eyebrow}</div> : null}
        <h3 dangerouslySetInnerHTML={{__html: title}} />
        {lede ? <p className="lede">{lede}</p> : null}
        {body.map((p, i) => <p key={i}>{p}</p>)}
        {cta ? <div style={{marginTop: 24}}>{cta}</div> : null}
      </div>
    </div>
  );
}

// =========================================================================
// Three-up plantation strip
// =========================================================================
function KxStrip({ items }) {
  return (
    <div className="kx-strip">
      {items.map(it => (
        <article className="kx-strip__card" key={it.name}>
          <img src={it.image} alt="" />
          <div className="kx-strip__num">{it.num}</div>
          <h3 className="kx-strip__name" dangerouslySetInnerHTML={{__html: it.name}} />
          <p className="kx-strip__desc">{it.desc}</p>
          <span className="kx-strip__cta">Explore</span>
        </article>
      ))}
    </div>
  );
}

// =========================================================================
// Big quote
// =========================================================================
function KxQuote({ body, attr, tone }) {
  const cls = "kx-quote" + (tone === "forest" ? " kx-quote--forest" : "");
  return (
    <section className={cls}>
      <div className="kx-container">
        <div className="kx-quote__mark">"</div>
        <p className="kx-quote__body" dangerouslySetInnerHTML={{__html: body}} />
        <div className="kx-quote__attr">{attr}</div>
      </div>
    </section>
  );
}

// =========================================================================
// Insights list
// =========================================================================
function KxInsights({ items }) {
  return (
    <div className="kx-insights">
      {items.map((it, i) => (
        <article className="kx-insight" key={i}>
          <div className="kx-insight__date">{it.date}</div>
          <div className="kx-insight__title" dangerouslySetInnerHTML={{__html: it.title}} />
          <div className="kx-insight__type">{it.type}</div>
          <div className="kx-insight__arrow">›</div>
        </article>
      ))}
    </div>
  );
}

function KxPills({ options, value, onChange }) {
  return (
    <div className="kx-pills">
      {options.map(o => (
        <button key={o}
          className={"kx-pill" + (value === o ? " kx-pill--active" : "")}
          onClick={() => onChange && onChange(o)}
        >{o}</button>
      ))}
    </div>
  );
}

// =========================================================================
// People — leadership grid with initials portraits
// =========================================================================
function KxPeople({ items }) {
  return (
    <div className="kx-people">
      {items.map(p => {
        const initials = p.name.split(" ").map(w => w[0]).join("").slice(0, 2);
        return (
          <div key={p.name}>
            <div className="kx-person__portrait" style={p.image ? { backgroundImage: `linear-gradient(180deg, rgba(14,42,34,0) 40%, rgba(14,42,34,0.7) 100%), url(${p.image})` } : {}}>
              {!p.image ? initials : null}
            </div>
            <h4 className="kx-person__name">{p.name}</h4>
            <div className="kx-person__title">{p.title}</div>
          </div>
        );
      })}
    </div>
  );
}

// =========================================================================
// Sub-page hero
// =========================================================================
function KxSubHero({ eyebrow, title, lede, meta, texture }) {
  return (
    <section className={"kx-subhero" + (texture ? " kx-subhero--texture" : "")}>
      <div className="kx-container">
        {eyebrow ? <div className="kx-eyebrow" style={{color: "var(--brass-700)"}}>{eyebrow}</div> : null}
        <h1 className="kx-subhero__title" dangerouslySetInnerHTML={{__html: title}} />
        {lede ? <p className="kx-subhero__lede">{lede}</p> : null}
        {meta ? <div className="kx-subhero__meta">{meta.map((m, i) => <span key={i}><span>{m.label}</span> <b>{m.value}</b></span>)}</div> : null}
      </div>
    </section>
  );
}

// =========================================================================
// Strategy detail block (long-form for the Strategies page)
// =========================================================================
function KxStrategy({ num, title, intro, body, facts, image }) {
  return (
    <section className="kx-strategy">
      <div className="kx-container">
        <div className="kx-strategy__top">
          <div>
            <div className="kx-strategy__num">{num}</div>
            <h2 className="kx-strategy__title" dangerouslySetInnerHTML={{__html: title}} />
          </div>
          <p className="kx-strategy__intro">{intro}</p>
        </div>
        <div className="kx-strategy__grid">
          <div className="kx-strategy__copy">
            {body.map((p, i) => <p key={i}>{p}</p>)}
            <ul>
              {facts.map((f, i) => <li key={i}><b>{f.label}</b><span>{f.value}</span></li>)}
            </ul>
          </div>
          <div className="kx-strategy__media"><img src={image} alt="" /></div>
        </div>
      </div>
    </section>
  );
}

// =========================================================================
// Contact form
// =========================================================================
function KxContact() {
  const [sent, setSent] = useState(false);
  function submit(e) { e.preventDefault(); setSent(true); }
  return (
    <div className="kx-contact kx-container">
      <form className="kx-contact__form" onSubmit={submit}>
        <div className="kx-field">
          <label className="kx-field__label">Full name</label>
          <input className="kx-field__input" placeholder="—" />
        </div>
        <div className="kx-field">
          <label className="kx-field__label">Email</label>
          <input className="kx-field__input" type="email" placeholder="—" />
        </div>
        <div className="kx-field">
          <label className="kx-field__label">Organization</label>
          <input className="kx-field__input" placeholder="—" />
        </div>
        <div className="kx-field">
          <label className="kx-field__label">Inquiry type</label>
          <input className="kx-field__input" placeholder="Partnership · Investor relations · Press · Other" />
        </div>
        <div className="kx-field kx-field--full">
          <label className="kx-field__label">Message</label>
          <textarea className="kx-field__input" rows="4" placeholder="Briefly, what would you like to discuss." />
        </div>
        <div className="kx-field--full" style={{marginTop: 8}}>
          <button type="submit" className="kx-btn kx-btn--ink">{sent ? "Submitted — thank you" : "Send inquiry"}</button>
        </div>
      </form>
      <aside className="kx-contact__aside">
        <h3>Investor Relations</h3>
        <p>For partnership and allocation inquiries, please contact the IR desk directly. Replies within two business days.</p>
        <hr className="kx-rule" />
        <p><b>Head Office — Colombo</b><br/>Level 28, World Trade Centre<br/>East Tower, Echelon Square<br/>Colombo 01, Sri Lanka</p>
        <p><b>Estate Office — Hatton</b><br/>Diyathilake Estate<br/>Bogawantalawa, Sri Lanka</p>
        <hr className="kx-rule" />
        <p><b>ir@keltracapital.com</b><br/>+94 11 555 0184</p>
      </aside>
    </div>
  );
}

// =========================================================================
// Footer
// =========================================================================
function KxFooter({ onNav }) {
  return (
    <footer className="kx-footer">
      <div className="kx-container">
        <div className="kx-footer__top">
          <div className="kx-footer__brand">
            <span className="kx-nav__wm" style={{color: "var(--ivory-100)"}}>KELTRA <span style={{fontFamily: "var(--font-text)", fontSize: 11, letterSpacing: "0.36em", marginLeft: 12, opacity: 0.85}}>CAPITAL</span></span>
            <p>Stewarding wealth. Building legacies. Disciplined capital allocation across financial, real, and alternative assets.</p>
          </div>
          <div className="kx-footer__col">
            <h4>Firm</h4>
            <a onClick={() => onNav("Firm")}>Our story</a>
            <a onClick={() => onNav("Firm")}>Philosophy</a>
            <a onClick={() => onNav("Firm")}>Leadership</a>
            <a>Stewardship</a>
          </div>
          <div className="kx-footer__col">
            <h4>Strategies</h4>
            <a onClick={() => onNav("Strategies")}>Listed Equities</a>
            <a onClick={() => onNav("Strategies")}>Real Estate</a>
            <a onClick={() => onNav("Plantations")}>Plantations</a>
            <a onClick={() => onNav("Strategies")}>Fixed Income</a>
          </div>
          <div className="kx-footer__col">
            <h4>Insights</h4>
            <a onClick={() => onNav("Insights")}>Letters</a>
            <a onClick={() => onNav("Insights")}>Field notes</a>
            <a onClick={() => onNav("Insights")}>Annual report</a>
            <a>Press</a>
          </div>
          <div className="kx-footer__col">
            <h4>Connect</h4>
            <a onClick={() => onNav("Contact")}>Contact</a>
            <a>Investor portal</a>
            <a>Careers</a>
            <a>LinkedIn</a>
          </div>
        </div>
        <div className="kx-footer__bot">
          <div>© 2026 Keltra Capital · MCMLXXXVII</div>
          <div className="kx-footer__legal">
            <a>Privacy</a>
            <a>Terms</a>
            <a>Disclosures</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  IMG, KxNav, KxHero, KxMarquee, KxSection, KxSectionHead,
  KxPillars, KxSplit, KxStrip, KxQuote, KxInsights, KxPills,
  KxPeople, KxSubHero, KxStrategy, KxContact, KxFooter,
});