// Larkspur Homepage

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "navy",
  "heroVariant": "statement"
}/*EDITMODE-END*/;

const ACCENT_PALETTES = {
  navy:   { brand: '#1a3a8f', deep: '#0f1f4a', soft: '#e7ebf6' },
  forest: { brand: '#0d3b2e', deep: '#072018', soft: '#dce8e2' },
  bronze: { brand: '#7a4a1a', deep: '#42260c', soft: '#efe4d4' },
  ink:    { brand: '#1a1a1a', deep: '#000000', soft: '#e8e8e8' },
  plum:   { brand: '#4a1a4a', deep: '#2a0d2a', soft: '#ece0ec' },
};

const HomeApp = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [bookOpen, setBookOpen] = React.useState(false);
  const [bookContext, setBookContext] = React.useState('general');

  React.useEffect(() => {
    const p = ACCENT_PALETTES[tweaks.accent] || ACCENT_PALETTES.navy;
    document.documentElement.style.setProperty('--brand', p.brand);
    document.documentElement.style.setProperty('--brand-deep', p.deep);
    document.documentElement.style.setProperty('--brand-soft', p.soft);
  }, [tweaks.accent]);

  const openBooking = (ctx = 'general') => { setBookContext(ctx); setBookOpen(true); };

  return (
    <>
      <Header active="home" onBook={() => openBooking('general')} />
      <main>
        <Hero variant={tweaks.heroVariant} onBook={() => openBooking('general')} />
        <TrustStrip />
        <Pathways onBook={openBooking} />
        <Services onBook={openBooking} />
        <Why />
        <CalculatorPreview />
        <TrustTeam />
        <Testimonials />
        <FinalCTA onBook={() => openBooking('general')} />
      </main>
      <Footer />
      <StickyCTA onClick={() => openBooking('general')} />
      <BookingModal open={bookOpen} onClose={() => setBookOpen(false)} context={bookContext} />
      <TweaksPanel title="Tweaks">
        <TweakSection title="Brand accent">
          <TweakRadio value={tweaks.accent} onChange={(v) => setTweak('accent', v)}
            options={[{ value: 'navy', label: 'Navy' },{ value: 'forest', label: 'Forest' },{ value: 'bronze', label: 'Bronze' },{ value: 'ink', label: 'Ink' },{ value: 'plum', label: 'Plum' }]} />
        </TweakSection>
        <TweakSection title="Hero variation">
          <TweakRadio value={tweaks.heroVariant} onChange={(v) => setTweak('heroVariant', v)}
            options={[{ value: 'statement', label: 'Statement' },{ value: 'pathway', label: 'Pathway-led' },{ value: 'image', label: 'Image-led' }]} />
        </TweakSection>
      </TweaksPanel>
    </>
  );
};

const Hero = ({ variant, onBook }) => {
  if (variant === 'pathway') return <HeroPathway onBook={onBook} />;
  if (variant === 'image') return <HeroImage onBook={onBook} />;
  return <HeroStatement onBook={onBook} />;
};

const HeroStatement = ({ onBook }) => (
  <section className="hero" data-screen-label="01 Hero — Statement">
    <div className="container">
      <div className="hero-grid">
        <div>
          <span className="eyebrow">Lending · Tax · Planning · Cover</span>
          <h1 style={{marginTop:24}}>
            Make every money decision <span className="underline">count</span>.<br/>
            <span style={{color:'var(--muted)'}}>Now and for the next generation.</span>
          </h1>
          <p className="lead hero-sub">
            Larkspur is one advisory team for your home loan, tax return, super and insurance. We plan them together, so your family's choices today keep paying off for decades.
          </p>
          <div className="hero-ctas">
            <button className="btn btn-primary btn-lg" onClick={onBook}>
              Book a planning session
              <span className="arrow"><Icon name="arrow-right" size={14}/></span>
            </button>
            <a href="services.html" className="btn btn-ghost btn-lg">See how we help</a>
          </div>
        </div>
        <div className="hero-side">
          <div className="hero-image">
            <Placeholder label="Family at home — candid" tone="sand" />
          </div>
          <div className="hero-stat-card">
            <div>
              <div className="stat-num">$1.1B</div>
              <div className="stat-label">Family wealth under advice across 2,800 clients</div>
            </div>
            <div style={{marginLeft:'auto', width:48, height:48, borderRadius:'50%', background:'var(--sand)', color:'var(--brand-deep)', display:'inline-flex', alignItems:'center', justifyContent:'center'}}>
              <Icon name="arrow-up-right" size={20}/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const HeroPathway = ({ onBook }) => {
  const paths = [
    { icon: 'home', label: 'Upgrade the family home' },
    { icon: 'tax', label: 'Keep more of what I earn' },
    { icon: 'retire', label: 'Retire on my terms' },
    { icon: 'shield', label: 'Look after my family if I can\'t' },
    { icon: 'portfolio', label: 'Start investing properly' },
    { icon: 'structure', label: 'Pass wealth to my kids' },
  ];
  return (
    <section className="hero" data-screen-label="01 Hero — Pathway">
      <div className="container">
        <div style={{textAlign:'center', maxWidth:880, margin:'0 auto'}}>
          <span className="eyebrow" style={{justifyContent:'center'}}>For growing Australian families</span>
          <h1 style={{marginTop:24}}>Where would you like to <span style={{color:'var(--brand)'}}>begin</span>?</h1>
          <p className="lead" style={{marginTop:24, maxWidth:620, marginInline:'auto', color:'var(--muted)'}}>
            Choose the goal that's top of mind. One adviser will take it from there and bring in the rest of the team when you need them.
          </p>
        </div>
        <div className="pathway-grid" style={{marginTop:64}}>
          {paths.map((p, i) => (
            <button key={i} className="pathway" onClick={onBook} style={{textAlign:'left'}}>
              <div className="pathway-icon"><Icon name={p.icon} size={22}/></div>
              <h3>{p.label}</h3>
              <div className="arrow-row"><span>Begin here</span><span><Icon name="arrow-right" size={12}/></span></div>
            </button>
          ))}
        </div>
      </div>
    </section>
  );
};

const HeroImage = ({ onBook }) => (
  <section className="hero" data-screen-label="01 Hero — Image" style={{padding:'24px 0 64px'}}>
    <div className="container">
      <div style={{borderRadius:'var(--radius-xl)', overflow:'hidden', background:'var(--bg-alt)', position:'relative', minHeight:560, padding:'56px 56px 48px', display:'flex', flexDirection:'column', justifyContent:'flex-end'}}>
        <div style={{position:'absolute', inset:0, zIndex:0}}><Placeholder label="Family outdoors — wide" tone="sand"/></div>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(15,18,24,0.7) 100%)', zIndex:1}}></div>
        <div style={{position:'relative', zIndex:2, color:'#fff', maxWidth:720}}>
          <span className="eyebrow" style={{color:'#fff'}}>Lending · Tax · Planning · Cover</span>
          <h1 style={{marginTop:20, color:'#fff'}}>Make every money decision <span style={{color:'var(--sand)'}}>count</span>.</h1>
          <p className="lead" style={{marginTop:20, color:'rgba(255,255,255,0.85)', maxWidth:560}}>One advisory team for your home loan, tax, super and insurance.</p>
          <div style={{marginTop:32, display:'flex', gap:12, flexWrap:'wrap'}}>
            <button className="btn btn-primary btn-lg" onClick={onBook}>Book a planning session<span className="arrow"><Icon name="arrow-right" size={14}/></span></button>
            <a href="services.html" className="btn btn-lg" style={{background:'rgba(255,255,255,0.12)', color:'#fff', border:'1px solid rgba(255,255,255,0.2)'}}>See how we help</a>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const TrustStrip = () => (
  <div className="trust-strip">
    <div className="container">
      <div className="trust-strip-inner">
        <span className="label">Licensed &amp; accredited</span>
        <div className="trust-marks">
          {['AFSL 000000','ACL 000000','Chartered Accountants ANZ','Registered Tax Agent','MFAA Member','SMSF Association'].map((t,i)=>(
            <span key={i} className="trust-mark"><span className="dot"></span>{t}</span>
          ))}
        </div>
      </div>
    </div>
  </div>
);

const Pathways = ({ onBook }) => {
  const items = [
    { icon: 'home', title: 'Moving to a bigger home', desc: 'Bridging finance, sell-or-keep analysis and a loan that still works when the kids reach school age.', ctx: 'lending' },
    { icon: 'tax', title: 'Paying less tax each year', desc: 'Year-round tax planning for PAYG earners and side businesses, not just a return in October.', ctx: 'tax' },
    { icon: 'shield', title: 'Covering the what-ifs', desc: 'Life, income and trauma cover sized to your mortgage, your childcare and your actual budget.', ctx: 'insurance' },
    { icon: 'retire', title: 'Getting super on track', desc: 'Contribution strategy, fund consolidation and a retirement date you can plan around.', ctx: 'wealth' },
    { icon: 'structure', title: 'Planning an inheritance', desc: 'Wills, family trusts and gifting strategies so wealth moves to the next generation cleanly.', ctx: 'wealth' },
    { icon: 'portfolio', title: 'Investing beyond the home', desc: 'A first investment property or share portfolio, sized to your cashflow and risk comfort.', ctx: 'lending' },
  ];
  return (
    <section data-screen-label="02 Pathways">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Your goals first</span>
            <h2 style={{marginTop:16}}>What's next for your family?</h2>
          </div>
          <div className="head-meta">
            <p>Pick a starting point. Your adviser coordinates the lending, tax and planning work behind it, so you only tell your story once.</p>
          </div>
        </div>
        <div className="pathway-grid">
          {items.map((p, i) => (
            <div key={i} className="pathway" onClick={() => onBook(p.ctx)}>
              <div className="pathway-icon"><Icon name={p.icon} size={22}/></div>
              <div><h3 style={{marginBottom:8}}>{p.title}</h3><p>{p.desc}</p></div>
              <div className="arrow-row"><span>Talk to us</span><span><Icon name="arrow-right" size={12}/></span></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Services = ({ onBook }) => {
  const services = [
    { num: '01 / Home &amp; investment lending', title: 'Loans planned around your life stage',
      desc: 'We look at where your family will be in five and ten years, then choose a loan structure that leaves room for the next step.',
      features: ['Home &amp; investment loans', 'Bridging &amp; construction', 'Refinance health checks', '35+ lenders compared'],
      cta: 'Explore lending', tone: 'default', href: 'services.html' },
    { num: '02 / Tax &amp; accounting', title: 'Tax handled all year, not once',
      desc: 'Quarterly check-ins with an accountant who knows your household, so deductions and timing decisions are made before 30 June.',
      features: ['Individual &amp; family returns', 'Sole trader &amp; company tax', 'Investment property schedules', 'Year-end planning'],
      cta: 'Meet a tax adviser', ctx: 'tax', tone: 'sand' },
    { num: '03 / Financial planning', title: 'A plan your whole family understands',
      desc: 'Super, investments, school fees and retirement mapped on one page, reviewed every year as life changes.',
      features: ['Super &amp; contributions', 'Education funding', 'Retirement projections', 'Estate &amp; succession'],
      cta: 'Start a financial plan', ctx: 'wealth', tone: 'default' },
    { num: '04 / Life &amp; income cover', title: 'Protection sized to what you owe',
      desc: 'We calculate cover from your mortgage, income and dependants, then help with the claim if the worst happens.',
      features: ['Income protection', 'Life &amp; TPD', 'Trauma cover', 'Claims support'],
      cta: 'Check your cover', ctx: 'insurance', tone: 'dark' },
  ];
  return (
    <section className="services" data-screen-label="03 Services">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">One team, four disciplines</span>
            <h2 style={{marginTop:16}}>Everything your family's finances need, in one place.</h2>
          </div>
          <div className="head-meta">
            <p>Your broker, accountant, planner and insurance adviser sit in the same office and share the same file. Nothing falls between the cracks.</p>
          </div>
        </div>
        <div className="services-grid">
          {services.map((s, i) => (
            <div key={i} className={`service-card ${s.tone === 'sand' ? 'sand' : s.tone === 'dark' ? 'dark' : ''}`}>
              <div>
                <div className="num" dangerouslySetInnerHTML={{__html: s.num}}/>
                <h3 style={{marginTop:12}}>{s.title}</h3>
                <p className="desc" style={{marginTop:12}}>{s.desc}</p>
              </div>
              <ul className="features">{s.features.map((f, j) => <li key={j} dangerouslySetInnerHTML={{__html: f}}/>)}</ul>
              <div className="footer">
                {s.href ? (
                  <a href={s.href} className="cta-link"><span className="arrow-circle"><Icon name="arrow-right" size={12}/></span>{s.cta}</a>
                ) : (
                  <button className="cta-link" onClick={() => onBook(s.ctx)}><span className="arrow-circle"><Icon name="arrow-right" size={12}/></span>{s.cta}</button>
                )}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Why = () => {
  const items = [
    { num: '01', title: 'One adviser who knows your file', desc: 'A single point of contact who pulls in specialists as needed. No repeating your situation to four different people.' },
    { num: '02', title: 'Built for families', desc: 'Our advice is shaped around school years, parental leave, ageing parents and the milestones that actually drive family finances.' },
    { num: '03', title: 'Fixed, transparent fees', desc: 'You see the cost of advice before you start. No hidden trail commissions or surprise invoices.' },
    { num: '04', title: 'Reviewed every year', desc: 'An annual review keeps your loans, tax position, super and cover aligned as your family changes.' },
  ];
  return (
    <section className="why" data-screen-label="04 Why Larkspur">
      <div className="container">
        <div className="why-grid">
          <div>
            <span className="eyebrow">Why Larkspur</span>
            <h2 style={{marginTop:16}}>Advice that grows up with your family.</h2>
            <p className="lead muted" style={{marginTop:20, maxWidth:380}}>Four things clients tell us they couldn't find anywhere else.</p>
          </div>
          <div className="why-list">
            {items.map((it, i) => (
              <div key={i} className="why-item">
                <span className="num">{it.num}</span>
                <div><h3>{it.title}</h3><p>{it.desc}</p></div>
                <span className="icon"><Icon name="arrow-up-right" size={14}/></span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const CalculatorPreview = () => {
  const [income, setIncome] = React.useState(180);
  const [deposit, setDeposit] = React.useState(150);
  const borrow = Math.round((income * 1000 * 5.8 + deposit * 1000 * 4.2) / 1000) * 1000;
  const fmt = (n) => '$' + n.toLocaleString('en-AU');
  const tools = ['Borrowing power calculator','Repayment planner','Super projection','School fees savings','Life cover estimator'];
  return (
    <section data-screen-label="05 Calculators" style={{padding:'48px 0 96px'}}>
      <div className="calc-section">
        <div className="calc-grid">
          <div>
            <span className="eyebrow">Free tools</span>
            <h2 style={{marginTop:16, color:'#fff'}}>Run the numbers before you call.</h2>
            <p className="lead" style={{marginTop:20, color:'rgba(255,255,255,0.72)', maxWidth:480}}>Get a rough answer in under a minute, then bring it to your first session for a proper plan.</p>
            <div className="calc-list">
              {tools.map((t,i)=>(
                <a key={i} href={i===0?'calculator.html':'#'} className="calc-list-item"><span>{t}</span><span className="arrow-mini"><Icon name="arrow-up-right" size={11}/></span></a>
              ))}
            </div>
          </div>
          <div className="calc-card">
            <div className="calc-card-head"><h3>How much could we borrow?</h3><span className="tag">Live</span></div>
            <div className="field">
              <div style={{display:'flex', justifyContent:'space-between'}}><label>Household income</label><span style={{fontSize:13, color:'var(--muted)'}}>{fmt(income*1000)}</span></div>
              <div className="field-row"><input type="range" min="60" max="400" step="5" value={income} onChange={(e) => setIncome(+e.target.value)}/></div>
            </div>
            <div className="field">
              <div style={{display:'flex', justifyContent:'space-between'}}><label>Savings for deposit</label><span style={{fontSize:13, color:'var(--muted)'}}>{fmt(deposit*1000)}</span></div>
              <div className="field-row"><input type="range" min="20" max="500" step="5" value={deposit} onChange={(e) => setDeposit(+e.target.value)}/></div>
            </div>
            <div className="calc-result">
              <div><div className="label-top">Estimated loan</div><div className="num">{fmt(borrow)}</div></div>
              <a href="calculator.html" className="btn btn-primary btn-sm">Full calculator<Icon name="arrow-right" size={12}/></a>
            </div>
            <p style={{fontSize:12, color:'var(--muted)', marginTop:14}}>Estimate only. Lenders assess every application differently.</p>
          </div>
        </div>
      </div>
    </section>
  );
};

const TrustTeam = () => {
  const team = [
    { img: 'assets/headshot-olivia.png', name: 'Olivia Brennan', role: 'Principal, Financial Planning', creds: ['CFP®', 'MFinPlan'] },
    { img: 'assets/headshot-tom.png', name: 'Tom Achterberg', role: 'Senior Mortgage Broker', creds: ['Dip FBM', 'MFAA'] },
    { img: 'assets/headshot-amara.png', name: 'Amara Okafor', role: 'Tax &amp; Accounting Lead', creds: ['CA', 'Tax Agent'] },
  ];
  return (
    <section className="trust-section" data-screen-label="06 Team & Trust">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Your advisers</span>
            <h2 style={{marginTop:16}}>Meet the people you'll actually speak to.</h2>
          </div>
          <div className="head-meta">
            <p>Qualified planners, brokers, accountants and risk advisers, each with at least ten years in practice.</p>
          </div>
        </div>
        <div className="team-grid" style={{gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))'}}>
          {team.map((t) => (
            <div key={t.name} className="team-card">
              <div className="ph" style={{aspectRatio:'4/5'}}>
                <img src={t.img} alt={t.name} style={{width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 20%'}}/>
              </div>
              <h4>{t.name}</h4>
              <div className="role" dangerouslySetInnerHTML={{__html: t.role}}/>
              <div className="credentials">{t.creds.map((c, j) => <span key={j} className="cred">{c}</span>)}</div>
            </div>
          ))}
        </div>
        <div className="stats-row">
          <div className="stat"><div className="num">12<span className="suffix">yrs</span></div><div className="label">Advising families since 2014</div></div>
          <div className="stat"><div className="num">2,800<span className="suffix">+</span></div><div className="label">Client households</div></div>
          <div className="stat"><div className="num">$1.1<span className="suffix">B</span></div><div className="label">Family wealth under advice</div></div>
          <div className="stat"><div className="num">94<span className="suffix">%</span></div><div className="label">Clients who renew each year</div></div>
        </div>
      </div>
    </section>
  );
};

const Testimonials = () => {
  const items = [
    { quote: 'We went from three separate advisers to one team. Our refinance, tax and super are finally pointing in the same direction.', name: 'Claire &amp; Ben R.', place: 'Newcastle · Two kids', date: 'Sep 2026', initials: 'CR' },
    { quote: 'They showed us we could afford the bigger house and still put money aside for school fees. The plan fits on one page.', name: 'Daniel W.', place: 'Geelong · Upgrader', date: 'Aug 2026', initials: 'DW' },
    { quote: 'Our adviser set up income protection a year before my back injury. The claim was handled for us. That cover kept our home.', name: 'Leah P.', place: 'Hobart · Nurse', date: 'Jun 2026', initials: 'LP' },
  ];
  return (
    <section className="testimonial-section" data-screen-label="07 Testimonials">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">Client stories</span>
            <h2 style={{marginTop:16}}>Families who planned ahead with us.</h2>
          </div>
          <div className="head-meta"><p style={{color:'rgba(255,255,255,0.7)'}}>Shared with permission. Surnames shortened for privacy.</p></div>
        </div>
        <div className="testimonial-grid">
          {items.map((t, i) => (
            <div key={i} className="testimonial">
              <span className="quote-mark">"</span>
              <p className="quote">{t.quote}</p>
              <div className="meta">
                <div className="avatar">{t.initials}</div>
                <div><div className="name" dangerouslySetInnerHTML={{__html: t.name}}/><div className="place">{t.place}</div></div>
                <div className="date">{t.date}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = ({ onBook }) => (
  <section className="final-cta" data-screen-label="08 Final CTA">
    <div className="container">
      <span className="eyebrow" style={{justifyContent:'center'}}>First session is free</span>
      <h2 style={{marginTop:16}}>Bring your questions. Leave with a plan.</h2>
      <p className="lead">A 45-minute session with a senior adviser, in person or on video.</p>
      <div className="ctas">
        <button className="btn btn-primary btn-lg" onClick={onBook}>Book a planning session<span className="arrow"><Icon name="arrow-right" size={14}/></span></button>
        <a href="services.html" className="btn btn-ghost btn-lg">See how we help</a>
      </div>
    </div>
  </section>
);

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