/* Remaining content sections: What we do, Why now, Market, Approach, Partner, Investor, Founder, Vision/Mission/Values, Final CTA, Footer */

const WhatWeDo = ({ lang, c }) => (
  <section id="what" className="section what-section">
    <div className="grid-rule"></div>
    <div className="shell two-col">
      <div className="col-l sticky-heading">
        <span className="eyebrow eyebrow-accent">{t(c.what.eyebrow, lang)}</span>
        <h2 className="display-lg reveal" style={{ marginTop: 18 }}>{t(c.what.title, lang)}</h2>
      </div>
      <div className="col-r">
        <p className="body-lg reveal">{t(c.what.lead, lang)}</p>
        <p className="body-md what-bullet reveal" style={{ "--reveal-delay": "120ms" }}>
          {t(c.what.bullet, lang)}
        </p>
        <ul className="principle-list reveal" style={{ "--reveal-delay": "200ms" }}>
          {c.what.principles.map((p, i) => (
            <li key={i} className="principle-item">
              <span className="principle-num mono-tag">{String(i + 1).padStart(2, "0")}</span>
              <span className="principle-text">{t(p, lang)}</span>
              <span className="principle-line"></span>
            </li>
          ))}
        </ul>
      </div>
    </div>
  </section>
);

const WhyNow = ({ lang, c }) => (
  <section id="why" className="section why-section">
    <div className="grid-rule"></div>
    <div className="shell">
      <div className="section-hd">
        <span className="eyebrow eyebrow-accent">{t(c.why.eyebrow, lang)}</span>
        <h2 className="display-lg reveal">{t(c.why.title, lang)}</h2>
      </div>
      <p className="body-lg why-body reveal">{t(c.why.body, lang)}</p>
      <div className="outcome-grid">
        {c.why.outcomes.map((o, i) => (
          <div key={i} className="outcome-card reveal" style={{ "--reveal-delay": `${i * 60}ms` }}>
            <span className="mono-tag">→ {String(i + 1).padStart(2, "0")}</span>
            <span className="outcome-text">{t(o, lang)}</span>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Market = ({ lang, c }) => (
  <section id="market" className="section market-section">
    <div className="grid-rule"></div>
    <div className="shell two-col">
      <div className="col-l sticky-heading">
        <span className="eyebrow eyebrow-accent">{t(c.market.eyebrow, lang)}</span>
        <h2 className="display-lg reveal" style={{ marginTop: 18 }}>{t(c.market.title, lang)}</h2>
      </div>
      <div className="col-r">
        <p className="body-lg reveal">{t(c.market.body, lang)}</p>
        <p className="body-md reveal" style={{ "--reveal-delay": "120ms" }}>{t(c.market.body2, lang)}</p>
        <div className="stats-row reveal" style={{ "--reveal-delay": "200ms" }}>
          {c.market.stats.map((s, i) => (
            <div key={i} className="stat-cell">
              <div className="stat-kpi display-md">{s.kpi}</div>
              <div className="mono-tag">{t(s.label, lang)}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const SEAMap = () => {
  // Diagrammatic city scatter — no fake landmass, just a constellation of markets
  // with Bangkok as the active HQ node radiating connections.
  const cities = [
    { x: 240, y: 180, l: "Bangkok",      tag: "HQ",        hq: true },
    { x: 215, y: 248, l: "Phuket",       tag: "TH" },
    { x: 308, y: 152, l: "Hanoi",        tag: "VN" },
    { x: 320, y: 198, l: "HCMC",         tag: "VN" },
    { x: 388, y: 158, l: "Manila",       tag: "PH" },
    { x: 300, y: 268, l: "Kuala Lumpur", tag: "MY" },
    { x: 322, y: 296, l: "Singapore",    tag: "SG" },
    { x: 396, y: 280, l: "Jakarta",      tag: "ID" },
  ];
  const hq = cities[0];

  return (
    <svg viewBox="0 0 600 360" className="sea-map" aria-hidden="true">
      <defs>
        <radialGradient id="pulseG" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" stopColor="var(--accent)" stopOpacity="0.45" />
          <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
        </radialGradient>
        <pattern id="mapDots" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="1" cy="1" r="0.8" fill="var(--line-strong)" opacity="0.55" />
        </pattern>
      </defs>

      {/* dotted grid backdrop */}
      <rect x="0" y="0" width="600" height="360" fill="url(#mapDots)" />

      {/* faint axis lines */}
      <g stroke="var(--line)" strokeWidth="0.6" strokeDasharray="2 4">
        <line x1="0" y1="180" x2="600" y2="180" />
        <line x1="240" y1="0" x2="240" y2="360" />
      </g>
      <text x="8" y="174" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-faint)" letterSpacing="0.1em">EQ · 0°</text>
      <text x="246" y="14" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-faint)" letterSpacing="0.1em">100° E</text>

      {/* connection lines from HQ */}
      {cities.slice(1).map((c, i) => (
        <line key={"ln-" + i} x1={hq.x} y1={hq.y} x2={c.x} y2={c.y}
          stroke="var(--accent-deep)" strokeOpacity="0.22" strokeWidth="0.8" strokeDasharray="3 3" />
      ))}

      {/* HQ glow + pulse */}
      <circle cx={hq.x} cy={hq.y} r="40" fill="url(#pulseG)" />
      <circle cx={hq.x} cy={hq.y} r="14" fill="none" stroke="var(--accent-deep)" strokeWidth="0.8" opacity="0.5">
        <animate attributeName="r" from="6" to="32" dur="2.6s" repeatCount="indefinite" />
        <animate attributeName="opacity" from="0.55" to="0" dur="2.6s" repeatCount="indefinite" />
      </circle>

      {/* city markers */}
      {cities.map((c, i) => {
        const labelRight = c.x < 480;
        const lx = labelRight ? c.x + 10 : c.x - 10;
        const anchor = labelRight ? "start" : "end";
        return (
          <g key={i}>
            {c.hq ? (
              <>
                <circle cx={c.x} cy={c.y} r="6" fill="var(--accent)" stroke="var(--bg)" strokeWidth="1.5" />
                <circle cx={c.x} cy={c.y} r="2" fill="#0E1208" />
              </>
            ) : (
              <>
                <circle cx={c.x} cy={c.y} r="3.5" fill="var(--bg)" stroke="var(--ink)" strokeWidth="1" />
                <circle cx={c.x} cy={c.y} r="1.4" fill="var(--ink)" />
              </>
            )}
            <text x={lx} y={c.y - 6} textAnchor={anchor}
              fontFamily="var(--font-display)" fontSize="12" fontWeight="500"
              fill="var(--ink)" letterSpacing="-0.01em">{c.l}</text>
            <text x={lx} y={c.y + 7} textAnchor={anchor}
              fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-mute)" letterSpacing="0.08em">
              {c.tag}{c.hq ? " · ACTIVE" : ""}
            </text>
          </g>
        );
      })}

      {/* legend */}
      <g transform="translate(20 326)">
        <circle cx="6" cy="0" r="4" fill="var(--accent)" />
        <text x="16" y="3" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-2)" letterSpacing="0.06em">HQ · Bangkok</text>
        <circle cx="146" cy="0" r="3" fill="var(--bg)" stroke="var(--ink)" strokeWidth="1" />
        <text x="156" y="3" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-2)" letterSpacing="0.06em">Target market</text>
        <line x1="290" y1="0" x2="320" y2="0" stroke="var(--accent-deep)" strokeOpacity="0.5" strokeWidth="0.8" strokeDasharray="3 3" />
        <text x="328" y="3" fontFamily="var(--font-mono)" fontSize="10" fill="var(--ink-2)" letterSpacing="0.06em">Expansion path</text>
      </g>

      {/* corner label */}
      <text x="580" y="22" textAnchor="end" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-mute)" letterSpacing="0.1em">
        SOUTHEAST ASIA · MARKET SCOPE
      </text>
    </svg>
  );
};

const Approach = ({ lang, c }) => (
  <section id="approach" className="section approach-section">
    <div className="grid-rule"></div>
    <div className="shell">
      <div className="section-hd">
        <span className="eyebrow eyebrow-accent">{t(c.approach.eyebrow, lang)}</span>
        <h2 className="display-lg reveal">{t(c.approach.title, lang)}</h2>
        <p className="body-lg reveal" style={{ maxWidth: 720, marginTop: 20 }}>{t(c.approach.body, lang)}</p>
      </div>
      <div className="pillar-grid">
        {c.approach.pillars.map((p, i) => (
          <div key={i} className="pillar reveal" style={{ "--reveal-delay": `${i * 80}ms` }}>
            <div className="pillar-num mono-tag">{p.n}</div>
            <div className="pillar-title display-sm">{t(p.title, lang)}</div>
            <p className="body-md">{t(p.body, lang)}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const Partner = ({ lang, c }) => (
  <section id="partners" className="section partner-section">
    <div className="grid-rule"></div>
    <div className="shell">
      <div className="section-hd">
        <span className="eyebrow eyebrow-accent">{t(c.partner.eyebrow, lang)}</span>
        <h2 className="display-lg reveal">{t(c.partner.title, lang)}</h2>
        <p className="body-lg reveal" style={{ maxWidth: 720, marginTop: 20 }}>{t(c.partner.body, lang)}</p>
      </div>

      <div className="audience-marquee">
        <div className="marquee">
          <div className="marquee-track">
            {[...c.partner.audiences, ...c.partner.audiences].map((a, i) => (
              <span key={i} className="audience-item">
                <span className="audience-mark"></span>
                {t(a, lang)}
              </span>
            ))}
          </div>
        </div>
      </div>

      <div className="ways-grid">
        {c.partner.ways.map((w, i) => (
          <div key={i} className="way-card reveal lift" style={{ "--reveal-delay": `${i * 80}ms` }}>
            <div className="way-tag mono-tag">{w.tag} · {lang === "th" ? "พาร์ทเนอร์ชิป" : "Partnership"}</div>
            <div className="way-title display-sm">{t(w.title, lang)}</div>
            <p className="body-md">{t(w.body, lang)}</p>
            <div className="way-arr"><ArrowUpRight /></div>
          </div>
        ))}
      </div>

      <div className="partner-cta-row reveal">
        <a href="#contact" className="btn btn-accent">
          {t(c.partner.cta, lang)}
          <ArrowRight />
        </a>
      </div>
    </div>
  </section>
);

const Investor = ({ lang, c }) => (
  <section id="investors" className="section investor-section">
    <div className="grid-rule"></div>
    <div className="shell two-col">
      <div className="col-l sticky-heading">
        <span className="eyebrow eyebrow-accent">{t(c.investor.eyebrow, lang)}</span>
        <h2 className="display-lg reveal" style={{ marginTop: 18 }}>{t(c.investor.title, lang)}</h2>
      </div>
      <div className="col-r">
        <p className="body-lg reveal">{t(c.investor.body, lang)}</p>
        <ul className="invest-list reveal" style={{ "--reveal-delay": "120ms" }}>
          {c.investor.points.map((p, i) => (
            <li key={i} className="invest-item">
              <span className="invest-num mono-tag">0{i + 1}</span>
              <span className="body-md">{t(p, lang)}</span>
            </li>
          ))}
        </ul>
        <div className="invest-audience reveal" style={{ "--reveal-delay": "200ms" }}>
          <div className="mono-tag" style={{ marginBottom: 12 }}>{lang === "th" ? "เปิดคุยกับ" : "Open to conversations with"}</div>
          <div className="invest-aud-row">
            {(lang === "th"
              ? ["นักลงทุน Angel", "นักลงทุนกลยุทธ์", "VC ระยะต้น", "Corporate VC", "พาร์ทเนอร์ระบบนิเวศ"]
              : ["Angel investors", "Strategic investors", "Early-stage VCs", "Corporate venture", "Ecosystem partners"]
            ).map((x, i) => <span key={i} className="chip">{x}</span>)}
          </div>
        </div>
        <a href="#contact" className="btn btn-primary invest-cta reveal">
          {t(c.investor.cta, lang)}
          <ArrowUpRight />
        </a>
      </div>
    </div>
  </section>
);

const Founder = ({ lang, c }) => (
  <section id="founder" className="section founder-section">
    <div className="grid-rule"></div>
    <div className="shell two-col">
      <div className="col-l">
        <span className="eyebrow eyebrow-accent">{t(c.founder.eyebrow, lang)}</span>
        <div className="founder-portrait reveal">
          <div className="founder-photo-wrap">
            <img src="assets/founder.png" alt="Wutcharin Thatan, founder of Oqiva Labs" className="founder-photo" />
            <div className="founder-photo-overlay">
              <span className="mono-tag">FOUNDER · CEO</span>
              <span className="mono-tag">BANGKOK · 2026</span>
            </div>
          </div>
        </div>
      </div>
      <div className="col-r">
        <h2 className="display-lg reveal">{t(c.founder.title, lang)}</h2>
        <div className="founder-name reveal" style={{ "--reveal-delay": "100ms" }}>
          <span className="display-md">{t(c.founder.name, lang)}</span>
          <span className="mono-tag">Founder · CEO</span>
        </div>
        <p className="body-lg reveal" style={{ "--reveal-delay": "180ms" }}>{t(c.founder.role, lang)}</p>
        <div className="founder-domains reveal" style={{ "--reveal-delay": "240ms" }}>
          {(lang === "th"
            ? ["Travel Tech", "การบิน", "สื่อ", "การเงิน", "Analytics", "Automation", "AI"]
            : ["Travel Tech", "Aviation", "Media", "Finance", "Analytics", "Automation", "AI"]
          ).map((d, i) => <span key={i} className="chip">{d}</span>)}
        </div>
        <a href="#contact" className="u-link accent reveal" style={{ "--reveal-delay": "300ms", marginTop: 24 }}>
          {t(c.founder.cta, lang)}
          <ArrowUpRight />
        </a>
      </div>
    </div>
  </section>
);

const VisionMission = ({ lang, c }) => (
  <section className="section vm-section">
    <div className="grid-rule"></div>
    <div className="shell">
      <div className="vm-grid">
        <div className="vm-card reveal">
          <div className="eyebrow eyebrow-accent">{t(c.vision.eyebrow, lang)}</div>
          <p className="display-md vm-body">{t(c.vision.body, lang)}</p>
        </div>
        <div className="vm-card reveal" style={{ "--reveal-delay": "120ms" }}>
          <div className="eyebrow eyebrow-accent">{t(c.mission.eyebrow, lang)}</div>
          <p className="display-md vm-body">{t(c.mission.body, lang)}</p>
        </div>
      </div>

      <div className="values-block">
        <div className="eyebrow eyebrow-accent values-eyebrow">{t(c.values.eyebrow, lang)}</div>
        <div className="values-list">
          {c.values.items.map((v, i) => (
            <div key={i} className="value-row reveal" style={{ "--reveal-delay": `${i * 60}ms` }}>
              <span className="mono-tag value-n">0{i + 1}</span>
              <span className="value-title display-sm">{t(v.title, lang)}</span>
              <span className="value-desc body-md">{t(v.body, lang)}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

const FinalCTA = ({ lang, c }) => (
  <section id="contact" className="section final-section">
    <div className="grid-rule"></div>
    <div className="shell">
      <div className="final-bg">
        <FinalDiagram />
      </div>
      <div className="final-inner">
        <span className="eyebrow eyebrow-accent reveal">{t(c.finalCta.eyebrow, lang)}</span>
        <h2 className="display-xl final-title reveal" style={{ "--reveal-delay": "80ms" }}>{t(c.finalCta.title, lang)}</h2>
        <p className="body-lg final-body reveal" style={{ "--reveal-delay": "160ms", maxWidth: 720 }}>{t(c.finalCta.body, lang)}</p>
        <div className="final-ctas reveal" style={{ "--reveal-delay": "240ms" }}>
          <a href="#partners" className="btn btn-accent">
            {lang === "th" ? "ร่วมเป็นพาร์ทเนอร์" : "Partner With Us"}
            <ArrowRight />
          </a>
          <a href="#investors" className="btn btn-primary">
            {lang === "th" ? "คุยเรื่องระดมทุน" : "Discuss Funding"}
            <ArrowUpRight />
          </a>
          <a href="#products" className="btn btn-ghost">
            {lang === "th" ? "ดูผลิตภัณฑ์" : "Explore Products"}
            <ArrowUpRight />
          </a>
        </div>
        <div className="final-mail reveal mono-tag" style={{ "--reveal-delay": "320ms" }}>
          → <a href="https://www.linkedin.com/in/wutcharin/" target="_blank" rel="noopener noreferrer" className="u-link accent">linkedin.com/in/wutcharin</a>
        </div>
      </div>
    </div>
  </section>
);

const FinalDiagram = () => (
  <svg viewBox="0 0 1200 500" preserveAspectRatio="xMidYMid slice" className="final-diagram" aria-hidden="true">
    <defs>
      <radialGradient id="finalG" cx="0.5" cy="0.5" r="0.6">
        <stop offset="0" stopColor="var(--accent)" stopOpacity="0.18" />
        <stop offset="1" stopColor="var(--accent)" stopOpacity="0" />
      </radialGradient>
    </defs>
    <ellipse cx="600" cy="260" rx="500" ry="200" fill="url(#finalG)" />
    {[...Array(16)].map((_, i) => {
      const r = 60 + i * 14;
      return (
        <circle key={i} cx="600" cy="260" r={r} fill="none" stroke="var(--line-strong)" strokeWidth="0.6" opacity={1 - i * 0.05} />
      );
    })}
    <circle cx="600" cy="260" r="6" fill="var(--accent-deep)" />
  </svg>
);

const Footer = ({ lang, c }) => (
  <footer className="site-footer">
    <div className="shell">
      <div className="footer-top">
        <div className="footer-brand">
          <Wordmark size={28} animated />
          <p className="body-md footer-blurb">{t(c.footer.blurb, lang)}</p>
          <div className="mono-tag footer-loc">
            <span>📍</span> {t(c.footer.location, lang)}
          </div>
          <a href="https://www.linkedin.com/in/wutcharin/" target="_blank" rel="noopener noreferrer" className="u-link accent">linkedin.com/in/wutcharin <ArrowUpRight /></a>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <div className="mono-tag footer-col-h">{t(c.footer.cols.product, lang)}</div>
            <a href="https://jongtoh.com" target="_blank" rel="noopener noreferrer" className="footer-link">Jongtoh</a>
            <a href="https://flowaios.vercel.app" target="_blank" rel="noopener noreferrer" className="footer-link">FlowAIOS</a>
          </div>
          <div className="footer-col">
            <div className="mono-tag footer-col-h">{t(c.footer.cols.partners, lang)}</div>
            <a href="#partners" className="footer-link">{lang === "th" ? "พาร์ทเนอร์ชิป" : "Partnership"}</a>
            <a href="#partners" className="footer-link">{lang === "th" ? "เชื่อมต่อระบบ" : "Integrations"}</a>
          </div>
          <div className="footer-col">
            <div className="mono-tag footer-col-h">{t(c.footer.cols.investors, lang)}</div>
            <a href="#investors" className="footer-link">{lang === "th" ? "ภาพรวม" : "Overview"}</a>
            <a href="https://www.linkedin.com/in/wutcharin/" target="_blank" rel="noopener noreferrer" className="footer-link">{lang === "th" ? "ติดต่อระดมทุน" : "Funding contact"}</a>
          </div>
          <div className="footer-col">
            <div className="mono-tag footer-col-h">{t(c.footer.cols.about, lang)}</div>
            <a href="#founder" className="footer-link">{lang === "th" ? "ผู้ก่อตั้ง" : "Founder"}</a>
            <a href="#approach" className="footer-link">{lang === "th" ? "แนวทาง" : "Approach"}</a>
            <a href="https://www.linkedin.com/in/wutcharin/" target="_blank" rel="noopener noreferrer" className="footer-link">{lang === "th" ? "ติดต่อ" : "Contact"}</a>
          </div>
        </div>
      </div>
      <div className="footer-bot">
        <div className="footer-mark">
          <Mark size={18} />
          <span className="mono-tag">OQIVA · LABS</span>
        </div>
        <div className="mono-tag">{t(c.footer.rights, lang)}</div>
        <div className="mono-tag">v1.0 · Bangkok</div>
      </div>
    </div>
  </footer>
);

Object.assign(window, { WhatWeDo, WhyNow, Market, Approach, Partner, Investor, Founder, VisionMission, FinalCTA, Footer, SEAMap });