// Canda Landing  Pintone, Why, Impact, CTA, Footer

function PintoneSection({ onContact }) {
  window.useLucide();
  return (
    <section id="pintone" className="section pintone">
      <div className="container">
        <div className="pintone-grid">
          <div>
            <window.Reveal>
              <div className="pintone-tag"><span className="dot" /> Flagship product</div>
            </window.Reveal>
            <window.Reveal delay={80}>
              <div className="pintone-logo-wrap">
                <img src={window.__resources.pintoneLogo} alt="pintone" className="pintone-logo" style={{ width: "500px", margin: "0px 0px 50px" }} />
              </div>
            </window.Reveal>
            <window.Reveal delay={120}>
              <h2 className="section-title pintone-headline">The message is only the beginning. Who hears it, and how, is what matters.</h2>
            </window.Reveal>
            <window.Reveal delay={180}>
              <p className="section-sub">
                Pintone encodes what matters: tone safety, dialect localisation for origin-country audiences, smuggler detection, misinformation flagging, and reporting-ready outputs. Communications teams get the campaign quality they need without the manual checks and iteration that slows them down.
              </p>
            </window.Reveal>
            <window.Reveal delay={220} as="ul" className="pintone-features">
              <li>
                <span className="check">
                  <svg viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
                <span><b>Tone safety and smuggler detection.</b> Flag risky phrasing and suspicious comment activity before it reaches beneficiaries.</span>
              </li>
              <li>
                <span className="check">
                  <svg viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
                <span><b>Dialect localisation.</b> Adapt content across regional dialects, not just languages, for the audiences who matter most.</span>
              </li>
              <li>
                <span className="check">
                  <svg viewBox="0 0 12 12" fill="none"><path d="M2.5 6.2L5 8.5L9.5 3.5" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" /></svg>
                </span>
                <span><b>Reporting-ready outputs.</b> Campaign content and insights formatted to meet accountability requirements from day one.</span>
              </li>
            </window.Reveal>
            <window.Reveal delay={260}>
              <div style={{ display: "flex", gap: 12, marginTop: 8, flexWrap: "wrap" }}>
                <button className="btn-primary" onClick={onContact}>
                  Book a Pintone demo
                  <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                    <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
                  </svg>
                </button>
              </div>
            </window.Reveal>
          </div>

          <window.Reveal delay={120}>
            <div className="pintone-product">
              <div className="pp-window">
                <div className="pp-titlebar">
                  <div className="pp-dots"><span /><span /><span /></div>
                  <div className="pp-urlbar">
                    <span className="pp-lock">
                      <svg viewBox="0 0 12 12" fill="none"><path d="M3.5 5.5V4a2.5 2.5 0 015 0v1.5M3 5.5h6v4.5H3z" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" /></svg>
                    </span>
                    <span className="pp-url">app.pintone.ai</span>
                  </div>
                  <div className="pp-avatars">
                    <span className="pp-av av-1">SA</span>
                    <span className="pp-av av-2">MK</span>
                    <span className="pp-av av-3">+4</span>
                  </div>
                </div>
                <div className="pp-body">
                  <div className="pp-breadcrumb">
                    <img src={window.__resources.pintoneLogo} alt="Pintone" className="pp-app-logo" />
                    <span className="pp-app-section">                                           Iraq Campaign  /  Dashboard</span>
                  </div>
                  <div className="pp-stats">
                    <div className="pp-stat">
                      <div className="pp-stat-label">Generated posts</div>
                      <div className="pp-stat-value">147</div>
                      <div className="pp-stat-trend up">↑ +127k reach</div>
                    </div>
                    <div className="pp-stat">
                      <div className="pp-stat-label">Insights detected</div>
                      <div className="pp-stat-value">27</div>
                      <div className="pp-stat-trend up">↑ +10 improvements</div>
                    </div>
                    <div className="pp-stat alert">
                      <div className="pp-stat-label">Comments analysed</div>
                      <div className="pp-stat-value">2,725</div>
                      <div className="pp-stat-trend warn"><span className="pp-warn-dot" /> 7 smugglers, 12 visa requests</div>
                    </div>
                  </div>
                  <div className="pp-card">
                    <div className="pp-card-head">
                      <div className="pp-card-title">Latest flagged comment</div>
                      <span className="pp-pill warn">Tone risk</span>
                    </div>
                    <div className="pp-comment">
                      <div className="pp-comment-meta">@user_4218 · Iraqi Arabic · 2m ago</div>
                      <div className="pp-comment-text" dir="rtl">{'"هذا الموقع يوفر رحلات إلى أوروبا بـ 5000 دولار فقط، شوفوا هنا 👉 '}<span className="pp-link">eu-trip-now.co/iq</span>{'"'}</div>
                      <div className="pp-comment-translate">"This website offers trips to Europe for only $5,000, check it out here 👉 eu-trip-now.co/iq"</div>
                    </div>
                    <div className="pp-suggest">
                      <div className="pp-suggest-label">Pintone suggests</div>
                      <div className="pp-suggest-text">Smuggler recruitment with a phishing link. Remove the comment and report the user.</div>
                      <div className="pp-suggest-actions">
                        <button>Remove comment</button>
                        <button className="ghost">Report user</button>
                      </div>
                    </div>
                  </div>
                  <div className="pp-spark">
                    <div className="pp-spark-label">Engagement, last 7 days</div>
                    <svg viewBox="0 0 320 60" preserveAspectRatio="none">
                      <defs>
                        <linearGradient id="ppspark" x1="0" x2="0" y1="0" y2="1">
                          <stop offset="0" stopColor="#1A8A8A" stopOpacity="0.35" />
                          <stop offset="1" stopColor="#1A8A8A" stopOpacity="0" />
                        </linearGradient>
                      </defs>
                      <path d="M0 46 L20 44 L40 40 L60 47 L80 38 L100 42 L120 30 L140 36 L160 22 L180 28 L200 31 L220 20 L240 26 L260 14 L280 19 L300 11 L320 16 L320 60 L0 60 Z" fill="url(#ppspark)" />
                      <path d="M0 46 L20 44 L40 40 L60 47 L80 38 L100 42 L120 30 L140 36 L160 22 L180 28 L200 31 L220 20 L240 26 L260 14 L280 19 L300 11 L320 16" stroke="#1A8A8A" strokeWidth="1.6" fill="none" strokeLinejoin="round" />
                      <g fill="#1A8A8A" opacity="0.35">
                        <circle cx="40" cy="40" r="1.6" />
                        <circle cx="100" cy="42" r="1.6" />
                        <circle cx="160" cy="22" r="1.6" />
                        <circle cx="220" cy="20" r="1.6" />
                        <circle cx="260" cy="14" r="1.6" />
                      </g>
                      <circle cx="300" cy="11" r="3.5" fill="#1A8A8A" />
                    </svg>
                  </div>
                </div>
              </div>
              <span className="pm-chip pm-chip-tl"><span className="pulse" /> 12 dialects active</span>
              <span className="pm-chip pm-chip-br">Deployment ready</span>
            </div>
          </window.Reveal>
        </div>
      </div>
    </section>);

}

function WhySection() {
  const values = [
  { num: "01", title: "Clarity", body: "We simplify complexity, turning sprawling field workflows into precise, accountable digital systems.", icon: "eye" },
  { num: "02", title: "Reliability", body: "We build trust through consistency. Institutional grade tools designed for procurement, audits and long horizons.", icon: "shield" },
  { num: "03", title: "Efficiency", body: "We optimise systems and workflows, cutting hours off review cycles so frontline teams can focus on impact.", icon: "zap" }];

  const iconSvg = {
    eye: <svg viewBox="0 0 24 24" fill="none"><path d="M2.5 12C2.5 12 6 5 12 5C18 5 21.5 12 21.5 12C21.5 12 18 19 12 19C6 19 2.5 12 2.5 12Z" stroke="currentColor" strokeWidth="1.6" /><circle cx="12" cy="12" r="3" stroke="currentColor" strokeWidth="1.6" /></svg>,
    shield: <svg viewBox="0 0 24 24" fill="none"><path d="M12 3L4 6V12C4 16.5 7.5 20 12 21C16.5 20 20 16.5 20 12V6L12 3Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" /><path d="M9 12L11 14L15 10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>,
    zap: <svg viewBox="0 0 24 24" fill="none"><path d="M13 3L4 14H11L10 21L19 10H12L13 3Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" /></svg>
  };
  return (
    <section id="why" className="section">
      <div className="container">
        <window.Reveal>
          <div className="section-eyebrow">Why Canda</div>
        </window.Reveal>
        <window.Reveal delay={80}>
          <h2 className="section-title">Three principles, applied to every line of code.</h2>
        </window.Reveal>
        <window.Reveal delay={140}>
          <p className="section-sub">
            Canda exists to enable governments and organisations to operate more efficiently
            through reliable, scalable, and human centered digital solutions.
          </p>
        </window.Reveal>
        <div className="values-grid">
          {values.map((v, i) =>
          <window.Reveal key={v.num} delay={120 + i * 80}>
              <div className="value-card">
                <div className="value-num">{v.num}</div>
                <div className="value-icon">{iconSvg[v.icon]}</div>
                <h3>{v.title}</h3>
                <p>{v.body}</p>
              </div>
            </window.Reveal>
          )}
        </div>
      </div>
    </section>);

}

function ImpactSection() {
  return (
    <section id="impact" className="impact">
      <div className="container">
        <div className="impact-grid">
          <div>
            <window.Reveal>
              <div className="section-eyebrow">Impact</div>
            </window.Reveal>
            <window.Reveal delay={80}>
              <h2 className="section-title">Built for the people on the receiving end of communications.</h2>
            </window.Reveal>
            <window.Reveal delay={140}>
              <p className="section-sub">Every feature in Pintone is shaped by what delivery teams and beneficiaries actually need, not what is easiest to build. We test in the dialects, on the devices, and in the contexts where migration communications fail or succeed.



              </p>
            </window.Reveal>
            <div className="impact-stats">
              <window.Reveal delay={160}>
                <div className="impact-stat">
                  <div className="impact-stat-num"><window.Counter to={12} suffix="+" /></div>
                  <div className="impact-stat-label">Dialects covered in Pintone's first release</div>
                </div>
              </window.Reveal>
              <window.Reveal delay={200}>
                <div className="impact-stat">
                  <div className="impact-stat-num"><window.Counter to={92} suffix="%" /></div>
                  <div className="impact-stat-label">Faster comms review cycles in pilot</div>
                </div>
              </window.Reveal>
              <window.Reveal delay={240}>
                <div className="impact-stat">
                  <div className="impact-stat-num"><window.Counter to={3} suffix=" days" /></div>
                  <div className="impact-stat-label">Average pilot setup, end to end</div>
                </div>
              </window.Reveal>
              <window.Reveal delay={280}>
                <div className="impact-stat">
                  <div className="impact-stat-num"><window.Counter to={5} suffix=" sectors" /></div>
                  <div className="impact-stat-label">Migration, health, climate, peacebuilding, education</div>
                </div>
              </window.Reveal>
            </div>
          </div>
          <window.Reveal delay={120}>
            <div className="collage">
              <div className="collage-img collage-img-1">
                <img src={window.__resources.beneficiary1} alt="Woman reading on her phone in a busy street" />
              </div>
              <div className="collage-img collage-img-2">
                <img src={window.__resources.beneficiary2} alt="Father and daughter speaking, with a phone in hand" />
              </div>

            </div>
          </window.Reveal>
        </div>
      </div>
    </section>);

}

function CtaBand({ onContact }) {
  return (
    <section className="cta-band">
      <div className="container">
        <div className="cta-inner">
          <window.Reveal>
            <h2>Ready to see Pintone.ai in your context?</h2>
          </window.Reveal>
          <window.Reveal delay={80}>
            <p>We run focused 30 minute discovery calls with ministries, agencies and NGOs to map your workflow before recommending anything.</p>
          </window.Reveal>
          <window.Reveal delay={140}>
            <button className="btn-accent" onClick={onContact}>
              Get in touch
              <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
                <path d="M3 11L11 3M11 3H4.5M11 3V9.5" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
              </svg>
            </button>
          </window.Reveal>
        </div>
      </div>
    </section>);

}

function Footer({ onContact }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-about">
            <a href="#" className="nav-logo">
              <img src={window.__resources.wordmarkBlue} alt="Canda" className="nav-wordmark" />
            </a>
            <p>Digital products for governments, humanitarian agencies and international organisations.</p>
          </div>
          <div>
            <h5>Product</h5>
            <ul>
              <li><a href="#pintone">Pintone.ai</a></li>
              <li><a href="#impact">Field impact</a></li>
            </ul>
          </div>
          <div>
            <h5>Company</h5>
            <ul>
              <li><a href="#why">Why Canda</a></li>
            </ul>
          </div>
          <div>
            <h5>Contact</h5>
            <ul>
              <li><a href="#" onClick={(e) => { e.preventDefault(); onContact(); }}>Get in touch</a></li>
              <li><a href="#">Cork, Ireland</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>2026 Canda Digital Ltd. All rights reserved.</span>
          <span className="ts">canda.digital</span>
        </div>
      </div>
    </footer>);

}

window.PintoneSection = PintoneSection;
window.WhySection = WhySection;
window.ImpactSection = ImpactSection;
window.CtaBand = CtaBand;
window.Footer = Footer;