// Larkspur — Shared icons + components
// All exported to window for cross-file use.

const Icon = ({ name, size = 20, stroke = 1.6 }) => {
  const s = { width: size, height: size, stroke: 'currentColor', strokeWidth: stroke, fill: 'none', strokeLinecap: 'round', strokeLinejoin: 'round', viewBox: '0 0 24 24' };
  switch (name) {
    case 'arrow-right': return <svg {...s}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case 'arrow-up-right': return <svg {...s}><path d="M7 17L17 7M7 7h10v10"/></svg>;
    case 'check': return <svg {...s}><path d="M5 12l5 5L20 7"/></svg>;
    case 'home': return <svg {...s}><path d="M3 11l9-8 9 8M5 9v12h14V9"/></svg>;
    case 'tax': return <svg {...s}><path d="M9 3h6l4 4v14H5V7l4-4z"/><path d="M9 12h6M9 16h4M14 8V3"/></svg>;
    case 'shield': return <svg {...s}><path d="M12 3l8 3v6c0 5-3.5 8.5-8 9-4.5-.5-8-4-8-9V6l8-3z"/></svg>;
    case 'retire': return <svg {...s}><circle cx="12" cy="7" r="3"/><path d="M6 21v-3a4 4 0 014-4h4a4 4 0 014 4v3"/></svg>;
    case 'structure': return <svg {...s}><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></svg>;
    case 'portfolio': return <svg {...s}><path d="M3 17l6-6 4 4 8-8"/><path d="M14 7h7v7"/></svg>;
    case 'calc': return <svg {...s}><rect x="5" y="3" width="14" height="18" rx="2"/><path d="M9 7h6M9 11h.01M12 11h.01M15 11h.01M9 15h.01M12 15h.01M15 15h.01M9 19h6"/></svg>;
    case 'doc': return <svg {...s}><path d="M14 3H6v18h12V7l-4-4z"/><path d="M14 3v4h4M9 13h6M9 17h6"/></svg>;
    case 'user': return <svg {...s}><circle cx="12" cy="8" r="4"/><path d="M4 21c0-4 4-7 8-7s8 3 8 7"/></svg>;
    case 'phone': return <svg {...s}><path d="M5 4h4l2 5-3 2a12 12 0 006 6l2-3 5 2v4a2 2 0 01-2 2A18 18 0 013 6a2 2 0 012-2z"/></svg>;
    case 'cal': return <svg {...s}><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg>;
    case 'star': return <svg {...s}><path d="M12 3l3 6 7 1-5 5 1 7-6-3-6 3 1-7-5-5 7-1z"/></svg>;
    case 'close': return <svg {...s}><path d="M6 6l12 12M18 6L6 18"/></svg>;
    case 'spark': return <svg {...s}><path d="M12 3v6M12 15v6M3 12h6M15 12h6"/></svg>;
    case 'dollar': return <svg {...s}><path d="M12 2v20M17 6H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>;
    case 'briefcase': return <svg {...s}><rect x="3" y="7" width="18" height="13" rx="2"/><path d="M8 7V5a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>;
    case 'menu': return <svg {...s}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case 'chev-down': return <svg {...s}><path d="M6 9l6 6 6-6"/></svg>;
    case 'plus': return <svg {...s}><path d="M12 5v14M5 12h14"/></svg>;
    case 'download': return <svg {...s}><path d="M12 3v14M6 13l6 6 6-6M4 21h16"/></svg>;
    case 'sparkle': return <svg {...s}><path d="M12 2l2 6 6 2-6 2-2 6-2-6-6-2 6-2 2-6z"/></svg>;
    default: return null;
  }
};

// === Striped placeholder with monospace label ===
const Placeholder = ({ label, tone = 'sand', height, aspect, dark = false }) => {
  const palettes = {
    sand: { bg: '#ebe1c7', stripe: '#dccba2', text: '#7a6a3f' },
    navy: { bg: '#e7ebf6', stripe: '#cdd5ee', text: '#3a4a7a' },
    ink:  { bg: '#1a1d24', stripe: '#252a34', text: 'rgba(255,255,255,0.6)' },
    cream:{ bg: '#ebe7df', stripe: '#ddd8cc', text: '#807868' },
  };
  const p = palettes[tone] || palettes.sand;
  const style = {
    width: '100%',
    height: height || (aspect ? 'auto' : '100%'),
    aspectRatio: aspect || undefined,
    background: `repeating-linear-gradient(135deg, ${p.bg} 0 14px, ${p.stripe} 14px 28px)`,
    borderRadius: 'inherit',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    color: p.text,
    fontFamily: 'var(--font-mono)',
    fontSize: 12,
    letterSpacing: '0.06em',
    textTransform: 'uppercase',
    position: 'relative',
    overflow: 'hidden',
  };
  return (
    <div style={style}>
      <span style={{ background: p.bg, padding: '6px 12px', borderRadius: 4 }}>{label}</span>
    </div>
  );
};

// === Header ===
const Header = ({ active = 'home', onBook }) => {
  return (
    <header className="site-header">
      <nav className="nav">
        <a href="index.html" className="nav-logo">
          <span className="mark"></span>
          <span>Larkspur</span>
        </a>
        <div className="nav-links">
          <a href="#" className={`nav-link ${active==='need'?'active':''}`}>I need help with <span className="chev"></span></a>
          <a href="services.html" className={`nav-link ${active==='services'?'active':''}`}>Services <span className="chev"></span></a>
          <a href="calculator.html" className={`nav-link ${active==='calc'?'active':''}`}>Calculators</a>
          <a href="#" className={`nav-link ${active==='about'?'active':''}`}>About</a>
          <a href="#" className={`nav-link ${active==='insights'?'active':''}`}>Insights</a>
        </div>
        <button className="btn btn-dark btn-sm nav-cta" onClick={onBook}>
          Book a planning session
          <Icon name="arrow-right" size={14}/>
        </button>
      </nav>
    </header>
  );
};

// === Footer ===
const Footer = () => (
  <footer>
    <div className="container">
      <div className="footer-grid">
        <div className="footer-brand">
          <a href="index.html" className="nav-logo">
            <span className="mark"></span>
            <span>Larkspur</span>
          </a>
          <p>Lending, tax, planning and insurance for Australian families, handled by one team.</p>
        </div>
        <div className="footer-col">
          <h5>Services</h5>
          <ul>
            <li><a href="services.html">Home &amp; investment lending</a></li>
            <li><a href="#">Tax &amp; accounting</a></li>
            <li><a href="#">Financial planning</a></li>
            <li><a href="#">Life &amp; income cover</a></li>
            <li><a href="#">Estate planning</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Resources</h5>
          <ul>
            <li><a href="calculator.html">Borrowing power</a></li>
            <li><a href="#">Loan comparison</a></li>
            <li><a href="#">Repayments</a></li>
            <li><a href="#">Rent vs buy</a></li>
            <li><a href="#">Offset calculator</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#">Our team</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Insights</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Offices</h5>
          <ul>
            <li><a href="#">Newcastle</a></li>
            <li><a href="#">Geelong</a></li>
            <li><a href="#">Hobart</a></li>
            <li><a href="#">Canberra</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 Larkspur Advisory Pty Ltd. All rights reserved.</span>
        <span className="afsl">AFSL 000000 · ACL 000000 · ABN 00 000 000 000</span>
      </div>
    </div>
  </footer>
);

// === Booking Modal ===
const BookingModal = ({ open, onClose, context = 'general' }) => {
  const [submitted, setSubmitted] = React.useState(false);
  const [step, setStep] = React.useState(1);

  React.useEffect(() => {
    if (!open) {
      setTimeout(() => { setSubmitted(false); setStep(1); }, 300);
    }
  }, [open]);

  const titles = {
    general: 'Book a planning session',
    lending: 'Book a lending strategy review',
    calc: 'Discuss your borrowing strategy',
  };

  return (
    <div className={`modal-overlay ${open?'open':''}`} onClick={onClose}>
      <div className="modal" onClick={e=>e.stopPropagation()} style={{position:'relative'}}>
        <button className="close-btn" onClick={onClose} style={{position:'absolute', top:20, right:20, zIndex:2, width:36, height:36, borderRadius:'50%', background:'rgba(255,255,255,0.92)', border:'1px solid var(--line)', display:'inline-flex', alignItems:'center', justifyContent:'center'}}>
          <Icon name="close" size={16}/>
        </button>
        <div className="modal-side">
          <span className="eyebrow" style={{color:'var(--sand)'}}>What to expect</span>
          <h3>A 45-minute session to plan your next step.</h3>
          <ul className="checks">
            <li><Icon name="check" size={16}/>Quick discovery of your goals and current situation</li>
            <li><Icon name="check" size={16}/>Specialist matched to your need — no generalist</li>
            <li><Icon name="check" size={16}/>Clear next steps with no obligation</li>
            <li><Icon name="check" size={16}/>Available in person or via video</li>
          </ul>
          <div style={{marginTop:'auto', paddingTop:24, borderTop:'1px solid rgba(255,255,255,0.1)', fontSize:13, color:'rgba(255,255,255,0.65)'}}>
            Trusted by 2,800+ Australian families since 2014.
          </div>
        </div>
        <div className="modal-main">
          {!submitted ? (
            <>
              <div>
                <h3>{titles[context] || titles.general}</h3>
                <p className="muted" style={{fontSize:14}}>We'll get back within 1 business day.</p>
              </div>
              <div className="row">
                <div className="field-input">
                  <label>First name</label>
                  <input type="text" placeholder="Sarah"/>
                </div>
                <div className="field-input">
                  <label>Last name</label>
                  <input type="text" placeholder="Mitchell"/>
                </div>
              </div>
              <div className="field-input">
                <label>Email</label>
                <input type="email" placeholder="sarah@example.com"/>
              </div>
              <div className="field-input">
                <label>Phone</label>
                <input type="tel" placeholder="04xx xxx xxx"/>
              </div>
              <div className="field-input">
                <label>What can we help with?</label>
                <select defaultValue={context}>
                  <option value="lending">Lending &amp; finance strategy</option>
                  <option value="tax">Property tax &amp; accounting</option>
                  <option value="wealth">Wealth advisory &amp; retirement</option>
                  <option value="insurance">Personal &amp; business insurance</option>
                  <option value="general">Not sure yet — help me decide</option>
                </select>
              </div>
              <div className="submit-row">
                <span className="muted" style={{fontSize:12.5}}>Your details stay private.</span>
                <button className="btn btn-primary" onClick={()=>setSubmitted(true)}>
                  Request my review
                  <span className="arrow"><Icon name="arrow-right" size={12}/></span>
                </button>
              </div>
            </>
          ) : (
            <div className="modal-success">
              <div className="check"><Icon name="check" size={28}/></div>
              <h3>Thanks — we've got it.</h3>
              <p className="muted" style={{maxWidth:340, margin:'12px auto 0'}}>A specialist will reach out within 1 business day to schedule your review.</p>
              <button className="btn btn-ghost" style={{marginTop:24}} onClick={onClose}>Close</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// === Sticky CTA ===
const StickyCTA = ({ onClick }) => (
  <button className="sticky-cta" onClick={onClick}>
    <span className="pulse"></span>
    <span className="sticky-cta-text">
      <span className="top">Free · 45 min</span>
      <span className="bot">Book a planning session</span>
    </span>
    <span className="go"><Icon name="arrow-right" size={14}/></span>
  </button>
);

Object.assign(window, { Icon, Placeholder, Header, Footer, BookingModal, StickyCTA });