// HomeSections.jsx — home page sections for StoreOn Web Solutions

const CONTACT_EMAIL = 'storeon.shopify.support@gmail.com';

// Gmail (esp. mobile) often ignores LF-only in mailto bodies; CRLF survives as real line breaks.
const contactHref = (subject, body) => {
  const bodyCrlf = body.replace(/\r\n/g, '\n').replace(/\n/g, '\r\n');

  return `mailto:${CONTACT_EMAIL}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(bodyCrlf)}`;
};

const MAIL = {
  project: contactHref(
    'New Shopify project',
    `Hi StoreOn,

I'd like to discuss a project. Here's what I can share so far (edit or delete any line that doesn't apply):

My Shopify store URL (or "not on Shopify yet"):
My website, if it's different from the store:
What I need help with (e.g. public app, custom app, theme, checkout UI, shipping/carrier logic, bulk sync, NutriScore, something else):
A short description of the problem or goal:
Any apps, themes, or systems we're already using:
Rough timeline or must-hit date (if you have one):

Thanks,
`,
  ),
  constellation: contactHref(
    'General inquiry — StoreOn',
    `Hi StoreOn,

I'm getting in touch after looking around your site. A few details that might help:

My Shopify store URL (or "not on Shopify yet"):
What I'm trying to figure out or build:
Anything else you'd want to know up front:

Thanks,
`,
  ),
  work: contactHref(
    'Question about your work',
    `Hi StoreOn,

I'm interested in how your past work might fit something we're planning.

My Shopify store URL (or "not on Shopify yet"):
What we're trying to ship or fix:
Which of your services or past projects sounds closest (if any):
Questions I have about your process or timeline:

Thanks,
`,
  ),
};

const Nav = ({ page, setPage, onToggleVariant, variant }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const go = (fn) => { fn(); setMenuOpen(false); };
  return (
    <nav className="nav">
      <div className="container">
        <div className="nav-inner">
          <a href="#" className="brand" onClick={e => { e.preventDefault(); go(() => setPage('home')); }}>
            <BrandMark size={30} />
          </a>
          <div className="nav-links">
            <a href="#services" className={page === 'home' ? 'active' : ''}
              onClick={e => { e.preventDefault(); setPage('home'); setTimeout(() => document.getElementById('services')?.scrollIntoView({behavior:'smooth'}), 50); }}>Services</a>
            <a href="#nutriscore" onClick={e => { e.preventDefault(); setPage('home'); setTimeout(() => document.getElementById('nutriscore')?.scrollIntoView({behavior:'smooth'}), 50); }}>NutriScore</a>
            <a href="#work" onClick={e => { e.preventDefault(); setPage('home'); setTimeout(() => document.getElementById('work')?.scrollIntoView({behavior:'smooth'}), 50); }}>Work</a>
            <a href="#process" onClick={e => { e.preventDefault(); setPage('home'); setTimeout(() => document.getElementById('process')?.scrollIntoView({behavior:'smooth'}), 50); }}>Process</a>
            <a href="#privacy" className={page === 'privacy' ? 'active' : ''}
              onClick={e => { e.preventDefault(); setPage('privacy'); window.scrollTo(0, 0); }}>Privacy</a>
          </div>
          <a className="nav-cta" href={MAIL.project}>
            Start a project
          </a>
          <button className={`nav-hamburger${menuOpen ? ' open' : ''}`} onClick={() => setMenuOpen(o => !o)} aria-label="Toggle menu">
            <span/><span/><span/>
          </button>
        </div>
        <div className={`nav-mobile${menuOpen ? ' open' : ''}`}>
          <a href="#services" onClick={e => { e.preventDefault(); go(() => { setPage('home'); setTimeout(() => document.getElementById('services')?.scrollIntoView({behavior:'smooth'}), 50); }); }}>Services</a>
          <a href="#nutriscore" onClick={e => { e.preventDefault(); go(() => { setPage('home'); setTimeout(() => document.getElementById('nutriscore')?.scrollIntoView({behavior:'smooth'}), 50); }); }}>NutriScore</a>
          <a href="#work" onClick={e => { e.preventDefault(); go(() => { setPage('home'); setTimeout(() => document.getElementById('work')?.scrollIntoView({behavior:'smooth'}), 50); }); }}>Work</a>
          <a href="#process" onClick={e => { e.preventDefault(); go(() => { setPage('home'); setTimeout(() => document.getElementById('process')?.scrollIntoView({behavior:'smooth'}), 50); }); }}>Process</a>
          <a href="#privacy" onClick={e => { e.preventDefault(); go(() => { setPage('privacy'); window.scrollTo(0, 0); }); }}>Privacy</a>
          <a className="nav-mobile-cta" href={MAIL.project} onClick={() => setMenuOpen(false)}>Start a project</a>
        </div>
      </div>
    </nav>
  );
};

// ——— Hero ———
const Hero = ({ variant }) => {
  const [moonPhase, setMoonPhase] = React.useState(0.35);
  React.useEffect(() => {
    const phases = [0.15, 0.3, 0.5, 0.7, 0.85];
    let i = 0;
    const t = setInterval(() => {
      i = (i + 1) % phases.length;
      setMoonPhase(phases[i]);
    }, 4500);
    return () => clearInterval(t);
  }, []);

  if (variant === 'grid') return <HeroGrid moonPhase={moonPhase} />;
  return <HeroEditorial moonPhase={moonPhase} />;
};

const HeroEditorial = ({ moonPhase }) => (
  <section style={{ paddingTop: 80, paddingBottom: 80, minHeight: 'calc(100vh - 80px)', display: 'flex', alignItems: 'center' }}>
    <div className="container" style={{ width: '100%' }}>
      <div className="hero-ed-grid">
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
            <span className="eyebrow">Ch. 01 — An atelier for Shopify</span>
            <svg width="60" height="10" viewBox="0 0 60 10">
              <line x1="0" y1="5" x2="60" y2="5" stroke="currentColor" strokeWidth="0.5" strokeDasharray="2 3" opacity="0.4"/>
              <circle cx="60" cy="5" r="2" fill="oklch(0.55 0.11 60)"/>
            </svg>
          </div>
          <h1 className="display">
            We build<br/>
            <em>Shopify apps</em><br/>
            charted by<br/>
            the stars.
          </h1>
          <p style={{
            marginTop: 40,
            fontFamily: 'var(--serif)',
            fontSize: 22,
            fontStyle: 'italic',
            lineHeight: 1.45,
            color: 'var(--ink-soft)',
            maxWidth: 520,
            fontWeight: 300,
          }}>
            A store-owned agency crafting public & custom Shopify applications
            for merchants who believe the smallest details orbit the largest outcomes.
          </p>
          <div style={{ display: 'flex', gap: 16, marginTop: 48, flexWrap: 'wrap' }}>
            <a className="btn" href={MAIL.project}>
              Chart a project
              <span style={{ fontSize: 14 }}>→</span>
            </a>
            <a className="btn ghost" href={MAIL.constellation}>
              See the constellation
            </a>
          </div>

          <div className="hero-stats" style={{ marginTop: 80, display: 'flex', gap: 48, alignItems: 'baseline' }}>
            <Stat n="+12" label="Apps launched" />
            <Stat n="6yr" label="On the Shopify orbit" />
          </div>
        </div>
        <div className="hero-moon-wrap">
          <Moon size={380} phase={moonPhase} />
          <div className="hero-moon-meta" style={{
            position: 'absolute',
            top: -20, right: -20,
            fontFamily: 'var(--mono)',
            fontSize: 10,
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            color: 'var(--ink-mute)',
            textAlign: 'right',
          }}>
            Phase {(moonPhase * 100).toFixed(0)}%<br/>
            <span style={{ opacity: 0.6 }}>42.3601° N</span><br/>
            <span style={{ opacity: 0.6 }}>71.0589° W</span>
          </div>
          <div className="hero-moon-meta" style={{
            position: 'absolute',
            bottom: 0, left: -30,
            fontFamily: 'var(--serif)',
            fontStyle: 'italic',
            fontSize: 13,
            color: 'var(--ink-mute)',
          }}>
            ✦ Fig. i — a full moon over release day
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HeroGrid = ({ moonPhase }) => (
  <section style={{ paddingTop: 60, paddingBottom: 60, minHeight: 'calc(100vh - 80px)' }}>
    <div className="container">
      {/* Top grid decoration */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', borderBottom: '1px solid var(--rule-soft)', padding: '16px 0', gap: 12 }}>
        {Array.from({length: 12}).map((_,i) => (
          <div key={i} style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'var(--ink-mute)', letterSpacing: '0.1em' }}>
            {String(i+1).padStart(2,'0')}
          </div>
        ))}
      </div>

      <div style={{ padding: '80px 0', position: 'relative' }}>
        <div style={{ position: 'absolute', top: 40, right: 0 }}>
          <Moon size={180} phase={moonPhase} />
        </div>
        <span className="eyebrow">Shopify dev · since 2023</span>
        <h1 className="display" style={{ marginTop: 24, fontSize: 'clamp(64px, 11vw, 180px)' }}>
          A quiet<br/>
          observatory<br/>
          for <em>commerce.</em>
        </h1>
        <div className="hero-grid-cols">
          <p style={{ fontFamily: 'var(--serif)', fontSize: 20, fontStyle: 'italic', lineHeight: 1.4, margin: 0, color: 'var(--ink-soft)' }}>
            StoreOn builds public apps, custom apps, and bespoke Shopify solutions for
            merchants who value patience over haste.
          </p>
          <div>
            <div className="eyebrow" style={{ marginBottom: 12 }}>Primary services</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 8 }}>
              <li>Public Shopify apps</li>
              <li>Custom merchant apps</li>
              <li>Theme & storefront engineering</li>
              <li>App audits & rescue work</li>
            </ul>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, alignItems: 'flex-start' }}>
            <a className="btn" href={MAIL.project}>
              Begin a chart
              <span style={{ fontSize: 14 }}>→</span>
            </a>
            <a className="btn ghost" href={MAIL.work}>View work</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const Stat = ({ n, label }) => (
  <div>
    <div style={{ fontFamily: 'var(--serif)', fontSize: 44, fontWeight: 300, lineHeight: 1, letterSpacing: '-0.02em' }}>{n}</div>
    <div className="eyebrow" style={{ marginTop: 6 }}>{label}</div>
  </div>
);

Object.assign(window, { Nav, Hero });