/* DigiHealthCloud — single-page React app, no build step.
 *
 * Copy lives in data/site-content.json  (edit that to change wording)
 * Scraped numbers live in data/market-intel.json (written by scrapers/, don't hand-edit)
 */

const { useState, useEffect } = React;

/* ------------------------------------------------------------------ icons */
const Icon = ({ name }) => {
  const paths = {
    app: <><rect x="6" y="2" width="12" height="20" rx="2.5" /><path d="M10 18h4" /></>,
    voice: <><path d="M12 3v18" /><path d="M8 7v10" /><path d="M16 7v10" /><path d="M4 10v4" /><path d="M20 10v4" /></>,
    shield: <><path d="M12 3l7 3v6c0 4.2-2.9 7.6-7 9-4.1-1.4-7-4.8-7-9V6l7-3z" /><path d="M9.5 12.5l1.8 1.8 3.4-3.6" /></>,
    chart: <><path d="M4 20V10" /><path d="M10 20V4" /><path d="M16 20v-7" /><path d="M21 20H3" /></>,
  };
  return (
    <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
      {paths[name] || paths.app}
    </svg>
  );
};

/* --------------------------------------------------------------- waveform */
/* Decorative audio waveform — the voice-capture motif. */
const Waveform = () => {
  const bars = 96;
  const w = 1200, h = 88, gap = w / bars;
  return (
    <svg className="waveform" viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none" aria-hidden="true">
      {Array.from({ length: bars }, (_, i) => {
        const t = i / bars;
        const amp = (Math.sin(t * 22) * 0.4 + Math.sin(t * 7.3) * 0.35 + Math.sin(t * 3.1) * 0.25);
        const bh = Math.max(3, Math.abs(amp) * (h * 0.72));
        return (
          <rect key={i} x={i * gap + gap * 0.25} y={(h - bh) / 2}
                width={gap * 0.5} height={bh} rx={gap * 0.25}
                fill="#2ea3a5" opacity={0.25 + Math.abs(amp) * 0.55} />
        );
      })}
    </svg>
  );
};

/* ----------------------------------------------------------------- header */
const Header = () => (
  <header className="site-header">
    <div className="wrap">
      <a className="brand" href="#top">
        <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="#2ea3a5"
             strokeWidth="2" strokeLinecap="round">
          <path d="M3 12h3l2.5-7 3.5 14 3-9 2 5h4" />
        </svg>
        DigiHealthCloud
      </a>
      <nav className="nav">
        <a href="#what">What we build</a>
        <a href="#how">How it works</a>
        <a href="#pulse">Market pulse</a>
        <a className="btn-sm" href="#contact">Book a call</a>
      </nav>
    </div>
  </header>
);

/* ------------------------------------------------------------------- hero */
const Hero = ({ c }) => (
  <div className="hero" id="top">
    <div className="wrap">
      <span className="eyebrow">{c.eyebrow}</span>
      <h1>{c.headline}</h1>
      <p className="lede">{c.subhead}</p>
      <div className="cta-row">
        <a className="btn btn-primary" href="#contact">{c.primaryCta}</a>
        <a className="btn btn-ghost" href="#how">{c.secondaryCta}</a>
      </div>
    </div>
    <Waveform />
  </div>
);

/* -------------------------------------------------------------- what we build */
const WhatWeBuild = ({ c }) => (
  <section id="what">
    <div className="wrap">
      <div className="section-head">
        <h2>{c.title}</h2>
        <p>{c.intro}</p>
      </div>
      <div className="grid grid-4">
        {c.items.map((it, i) => (
          <div className="card" key={i}>
            <div className="icon"><Icon name={it.icon} /></div>
            <h3>{it.title}</h3>
            <p>{it.body}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* --------------------------------------------------------------- how it works */
const HowItWorks = ({ c }) => (
  <section id="how" style={{ background: '#fff', borderTop: '1px solid var(--line)' }}>
    <div className="wrap">
      <div className="section-head">
        <h2>{c.title}</h2>
        <p>{c.intro}</p>
      </div>
      <div className="steps">
        {c.steps.map((s, i) => (
          <div className="step" key={i}>
            <div className="step-num">{i + 1}</div>
            <div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ------------------------------------------------- market pulse (scraped data) */
const MarketPulse = ({ data }) => {
  // Hidden until the scraper has produced real data — no placeholder numbers.
  if (!data || !(data.stats || []).length) return null;
  return (
    <section id="pulse" className="pulse">
      <div className="wrap">
        <div className="section-head">
          <h2>Market pulse</h2>
          <p>Updated automatically from the public ClinicalTrials.gov registry — no manual editing.</p>
        </div>

        <div className="stat-row">
          {(data.stats || []).map((s, i) => (
            <div className="stat" key={i}>
              <div className="num">{s.value}</div>
              <div className="lbl">{s.label}</div>
            </div>
          ))}
        </div>

        <ul className="trial-list">
          {(data.recentStudies || []).map((t, i) => (
            <li key={i}>
              <a href={`https://clinicaltrials.gov/study/${t.nctId}`} target="_blank" rel="noopener noreferrer">
                {t.title}
              </a>
              <div className="trial-meta">
                {[t.phase, t.status, t.sponsor].filter(Boolean).join(' · ')}
              </div>
            </li>
          ))}
        </ul>

        <p className="stamp">
          Last updated {data.updatedAt ? new Date(data.updatedAt).toLocaleDateString('en-US',
            { year: 'numeric', month: 'long', day: 'numeric' }) : '—'} · Source: ClinicalTrials.gov
        </p>
      </div>
    </section>
  );
};

/* ---------------------------------------------------------------- contact */
const Contact = ({ c }) => {
  const [form, setForm] = useState({ name: '', email: '', message: '' });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });

  // No backend yet: this opens the visitor's email client with the message filled in.
  // Swap for a real endpoint (Formspree, Hostinger PHP mailer) when you want one.
  const submit = (e) => {
    e.preventDefault();
    const subject = encodeURIComponent(`Inquiry from ${form.name || 'website visitor'}`);
    const body = encodeURIComponent(`${form.message}\n\n— ${form.name}\n${form.email}`);
    window.location.href = `mailto:${c.email}?subject=${subject}&body=${body}`;
  };

  return (
    <section id="contact" className="contact">
      <div className="wrap">
        <div className="grid grid-2" style={{ gap: 48, alignItems: 'start' }}>
          <div>
            <div className="section-head" style={{ marginBottom: 20 }}>
              <h2>{c.title}</h2>
              <p>{c.intro}</p>
            </div>
            <p style={{ color: 'rgba(247,244,238,0.85)' }}>
              <a href={`mailto:${c.email}`} style={{ color: 'var(--signal)', textDecoration: 'none', fontWeight: 600 }}>
                {c.email}
              </a>
            </p>
          </div>

          <form onSubmit={submit}>
            <div className="field">
              <label htmlFor="name">Name</label>
              <input id="name" value={form.name} onChange={set('name')} required />
            </div>
            <div className="field">
              <label htmlFor="email">Work email</label>
              <input id="email" type="email" value={form.email} onChange={set('email')} required />
            </div>
            <div className="field">
              <label htmlFor="message">What are you running?</label>
              <textarea id="message" rows="4" value={form.message} onChange={set('message')} />
            </div>
            <button className="btn btn-primary" type="submit">Send</button>
            <p className="form-note">
              Please don't include patient data or PHI in this form.
            </p>
          </form>
        </div>
      </div>
    </section>
  );
};

const Footer = () => (
  <footer className="site-footer">
    <div className="wrap">
      <div>© {new Date().getFullYear()} DigiHealthCloud LLC</div>
      <div><a href="privacy.html">Privacy policy</a></div>
    </div>
  </footer>
);

/* -------------------------------------------------------------------- app */
const App = () => {
  const [content, setContent] = useState(null);
  const [intel, setIntel] = useState(null);

  useEffect(() => {
    fetch('data/site-content.json').then(r => r.json()).then(setContent).catch(() => {});
    fetch('data/market-intel.json').then(r => r.json()).then(setIntel).catch(() => {});
  }, []);

  if (!content) return null;

  return (
    <>
      <Header />
      <Hero c={content.hero} />
      <WhatWeBuild c={content.whatWeBuild} />
      <HowItWorks c={content.howItWorks} />
      <MarketPulse data={intel} />
      <Contact c={content.contact} />
      <Footer />
    </>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<App />);