/* 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 href="catalog.html">Device catalog</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/ct2/show/${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: '', newsletter: true, company: '',
  });
  const [status, setStatus] = useState({ state: 'idle', error: '' });

  const set = (k) => (e) =>
    setForm({ ...form, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value });

  const submit = async (e) => {
    e.preventDefault();
    setStatus({ state: 'sending', error: '' });
    try {
      const res = await fetch('subscribe.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(form),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok || !data.ok) throw new Error(data.error || 'Something went wrong on our side.');
      setStatus({ state: 'done', error: '' });
    } catch (err) {
      setStatus({ state: 'error', error: err.message });
    }
  };

  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)', fontWeight: 600 }}>
                {c.email}
              </a>
            </p>
          </div>

          {status.state === 'done' ? (
            <div className="form-done">
              <h3>Thanks — that reached us.</h3>
              <p>
                {form.newsletter
                  ? 'You are on the list for the digital-health trials update, and we will reply to anything you asked about.'
                  : 'We will get back to you shortly.'}
              </p>
              <button
                className="btn btn-ghost"
                type="button"
                onClick={() => {
                  setForm({ name: '', email: '', message: '', newsletter: true, company: '' });
                  setStatus({ state: 'idle', error: '' });
                }}
              >
                Send another
              </button>
            </div>
          ) : (
            <form onSubmit={submit} noValidate>
              <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>

              {/* Hidden from people; bots fill it and get silently dropped.
                  Hidden inline rather than via the stylesheet: if the CSS ever
                  fails to load, a visitor must still never see this field and
                  have their message discarded as automated. */}
              <div className="hp" aria-hidden="true"
                   style={{ position: 'absolute', left: '-9999px', width: 1, height: 1, overflow: 'hidden' }}>
                <label htmlFor="company">Company</label>
                <input id="company" tabIndex="-1" autoComplete="off"
                       value={form.company} onChange={set('company')} />
              </div>

              <label className="check-row">
                <input type="checkbox" checked={form.newsletter} onChange={set('newsletter')} />
                <span>
                  Send me the update on new clinical trials using digital health technology.
                </span>
              </label>

              <button className="btn btn-primary" type="submit" disabled={status.state === 'sending'}>
                {status.state === 'sending' ? 'Sending…' : 'Send'}
              </button>

              {status.state === 'error' && (
                <p className="form-error" role="alert">{status.error}</p>
              )}

              <p className="form-note">
                Please don't include patient data or PHI in this form. We store what you send
                here so we can reply — see our <a href="privacy.html">privacy policy</a>.
                Unsubscribe any time.
              </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(() => {
    // cache: 'no-cache' revalidates with the server on every load, so a weekly
    // data refresh shows up immediately instead of serving a stale cached copy.
    // The server still answers 304 when nothing changed, so this costs nothing.
    const opts = { cache: 'no-cache' };
    fetch('data/site-content.json', opts).then(r => r.json()).then(setContent).catch(() => {});
    fetch('data/market-intel.json', opts).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 />);