script.js

const $=(s,p=document)=>p.querySelector(s),$$=(s,p=document)=>[...p.querySelectorAll(s)];const WA='919929562585';
const photos={
team:'https://images.pexels.com/photos/3184465/pexels-photo-3184465.jpeg?auto=compress&cs=tinysrgb&w=2200',
meeting:'https://images.pexels.com/photos/3182773/pexels-photo-3182773.jpeg?auto=compress&cs=tinysrgb&w=2200',
office:'https://images.pexels.com/photos/3184436/pexels-photo-3184436.jpeg?auto=compress&cs=tinysrgb&w=2200'
};
const colors=[{name:'Electric Indigo',hex:'#6f7cff'},{name:'Teal',hex:'#18a999'},{name:'Cyan',hex:'#1b9bd7'},{name:'Orange',hex:'#ef7f45'},{name:'Magenta',hex:'#bc5bd3'},{name:'Emerald',hex:'#28a86b'},{name:'Royal Blue',hex:'#356ee8'},{name:'Coral',hex:'#e35f70'}];
const texts=[
{name:'Operations',k:'CRM · Projects · Automation',t:'Run the Work. Not the Busywork.',p:'One workspace for leads, delivery and follow-up.'},
{name:'AI',k:'AI-assisted Business Workspace',t:'Turn Activity Into the Next Best Action.',p:'Useful suggestions, clearly labelled and ready for review.'},
{name:'Sales',k:'Pipeline · Follow-up · Proposals',t:'Keep Every Opportunity Moving.',p:'A clearer sales process from first contact to close.'},
{name:'Projects',k:'Tasks · Milestones · Delivery',t:'Know What Is Moving and What Is Stuck.',p:'Project visibility without another status meeting.'},
{name:'Agency',k:'Clients · Work · Billing',t:'One Operating System for the Agency.',p:'Connect sales, delivery and client follow-up.'},
{name:'Startup',k:'Build · Sell · Learn',t:'Move Faster Without Losing the Thread.',p:'A flexible workspace for changing priorities.'},
{name:'Reports',k:'Data · Decisions · Direction',t:'See the Business Without Building a Spreadsheet.',p:'Practical reporting across sales and delivery.'}
];
const heroStyles=[
{name:'Product Command',className:'hero-01',photo:'',color:'#6f7cff',text:0},
{name:'Centered Launch',className:'hero-02',photo:'',color:'#1b9bd7',text:1},
{name:'Reverse Workspace',className:'hero-03',photo:'',color:'#18a999',text:3},
{name:'Grid Console',className:'hero-04',photo:'',color:'#ef7f45',text:6},
{name:'Team + Product',className:'hero-05',photo:photos.team,color:'#bc5bd3',text:4},
{name:'Glass AI',className:'hero-06',photo:'',color:'#28a86b',text:1},
{name:'Product Stage',className:'hero-07',photo:'',color:'#356ee8',text:2},
{name:'Soft Cards',className:'hero-08',photo:'',color:'#e35f70',text:5},
{name:'Office Overlay',className:'hero-09',photo:photos.office,color:'#18a999',text:0},
{name:'Executive View',className:'hero-10',photo:'',color:'#6f7cff',text:6}
];
const tourData={
'CRM':()=>`<div class="tour-title"><div><span class="eyebrow">Sales Workspace</span><h3>Opportunity Pipeline</h3></div><button>+ Add Lead</button></div><div class="pipeline">${['New','Qualified','Proposal','Won'].map((stage,i)=>`<div class="pipeline-column"><span>${stage}</span>${Array.from({length:i===3?1:2},(_,n)=>`<article class="deal-card"><b>${['Northstar Studio','Aster Labs','Kite Retail','Mira Homes'][i+n]||'New Account'}</b><small>${['₹1.2L','₹2.4L','₹3.1L','₹4.8L'][i]||'₹90K'} · Next step due</small></article>`).join('')}</div>`).join('')}</div>`,
'Projects':()=>`<div class="tour-title"><div><span class="eyebrow">Delivery Workspace</span><h3>Project Tasks</h3></div><button>+ New Task</button></div><div class="task-list">${['Homepage review','Client data migration','Automation testing','Launch checklist','Monthly report'].map((x,i)=>`<article class="task-row"><i></i><div><b>${x}</b><small>${['Design Team','Operations','Product','Project Lead','Accounts'][i]} · Due ${i+2} days</small></div><span>${['In review','In progress','Planned','Blocked','Ready'][i]}</span></article>`).join('')}</div>`,
'Automations':()=>`<div class="tour-title"><div><span class="eyebrow">Workflow Workspace</span><h3>Active Automations</h3></div><button>+ Build Workflow</button></div><div class="automation-list">${['New lead follow-up','Proposal accepted onboarding','Overdue task escalation','Payment received handoff'].map((x,i)=>`<article class="automation-row"><span>${i+1}</span><div><b>${x}</b><small>Trigger, conditions and reviewed action</small></div><strong>Active</strong></article>`).join('')}</div>`,
'Reports':()=>`<div class="tour-title"><div><span class="eyebrow">Business Reports</span><h3>Performance Overview</h3></div><button>Export</button></div><div class="report-grid">${[['Pipeline','₹8.4L'],['Win Rate','31%'],['On-time Work','86%']].map((r,j)=>`<article class="report-card"><span>${r[0]}</span><b>${r[1]}</b><div class="mini-chart">${[32,52,45,70,63,90].map(h=>`<i style="height:${h}%"></i>`).join('')}</div></article>`).join('')}</div>`
};
const integrations=[
{name:'Email',type:'Communication',icon:'@'},{name:'Calendar',type:'Scheduling',icon:'31'},{name:'Cloud Drive',type:'Files',icon:'D'},{name:'Accounting',type:'Finance',icon:'₹'},{name:'Forms',type:'Lead Capture',icon:'F'},{name:'Chat',type:'Team Communication',icon:'C'},{name:'Payments',type:'Billing',icon:'P'},{name:'Webhooks',type:'Developer',icon:'W'},{name:'Analytics',type:'Reporting',icon:'A'}
];
const plans=[
{name:'Starter',monthly:1499,yearly:1199,desc:'For small teams building a consistent workflow.',features:['Up to 5 users','CRM and tasks','Basic reports','Email support']},
{name:'Growth',monthly:3499,yearly:2799,desc:'For teams connecting sales and delivery.',features:['Up to 20 users','Automations','Project views','Advanced reports','Priority support'],featured:true},
{name:'Scale',monthly:7999,yearly:6399,desc:'For larger teams needing controls and support.',features:['Up to 60 users','Custom roles','Workflow templates','Data exports','Onboarding support']}
];
let state={style:0,color:0,text:0,colorLocked:false,textLocked:false,fontLocked:false,auto:true,billing:'monthly',tour:'CRM'},styleTimer,colorTimer,textTimer;

function formatINR(n){return new Intl.NumberFormat('en-IN',{style:'currency',currency:'INR',maximumFractionDigits:0}).format(n)}
function rgb(hex){hex=hex.replace('#','');const n=parseInt(hex,16);return[(n>>16)&255,(n>>8)&255,n&255].join(',')}
function save(){localStorage.setItem('nexora-settings',JSON.stringify({style:state.style,color:state.color,text:state.text,colorLocked:state.colorLocked,textLocked:state.textLocked,theme:document.documentElement.dataset.theme,font:document.documentElement.style.getPropertyValue('--font')}))}
function restore(){try{const s=JSON.parse(localStorage.getItem('nexora-settings')||'{}');if(Number.isInteger(s.style))state.style=s.style;if(Number.isInteger(s.color))state.color=s.color;if(Number.isInteger(s.text))state.text=s.text;state.colorLocked=!!s.colorLocked;state.textLocked=!!s.textLocked;if(s.theme)document.documentElement.dataset.theme=s.theme;if(s.font)document.documentElement.style.setProperty('--font',s.font)}catch{}}
function setColor(hex,index=null){document.documentElement.style.setProperty('--accent',hex);document.documentElement.style.setProperty('--accent-rgb',rgb(hex));$('#colorPicker').value=hex;if(index!==null)state.color=index;save()}
function setText(i){state.text=(i+texts.length)%texts.length;const x=texts[state.text];$('#heroKicker').textContent=x.k;$('#heroTitle').textContent=x.t;$('#heroText').textContent=x.p;$$('#textList button').forEach((b,n)=>b.classList.toggle('active',n===state.text));save()}
function setStyle(i,user=false){state.style=(i+heroStyles.length)%heroStyles.length;const x=heroStyles[state.style];$('.hero').className=`hero ${x.className}`;$('#heroPhoto').style.backgroundImage=x.photo?`url("${x.photo}")`:'none';$('#styleName').textContent=`${String(state.style+1).padStart(2,'0')} · ${x.name}`;$$('#styleDots button').forEach((b,n)=>b.classList.toggle('active',n===state.style));$$('#styleList button').forEach((b,n)=>b.classList.toggle('active',n===state.style));if(!state.colorLocked)setColor(x.color,colors.findIndex(c=>c.hex===x.color));if(!state.textLocked)setText(x.text);save();if(user)restartAuto()}
function restartAuto(){clearInterval(styleTimer);clearInterval(colorTimer);clearInterval(textTimer);if(!state.auto)return;styleTimer=setInterval(()=>setStyle(state.style+1),60000);colorTimer=setInterval(()=>{if(!state.colorLocked){state.color=(state.color+1)%colors.length;setColor(colors[state.color].hex,state.color)}},18000);textTimer=setInterval(()=>{if(!state.textLocked)setText(state.text+1)},24000)}
heroStyles.forEach((x,i)=>{const d=document.createElement('button');d.textContent=String(i+1).padStart(2,'0');d.onclick=()=>setStyle(i,true);$('#styleDots').appendChild(d);const b=document.createElement('button');b.textContent=x.name;b.onclick=()=>setStyle(i,true);$('#styleList').appendChild(b)});
colors.forEach((c,i)=>{const b=document.createElement('button');b.style.background=c.hex;b.title=c.name;b.onclick=()=>setColor(c.hex,i);$('#colorList').appendChild(b)});
texts.forEach((x,i)=>{const b=document.createElement('button');b.textContent=x.name;b.onclick=()=>setText(i);$('#textList').appendChild(b)});

Object.keys(tourData).forEach((name,i)=>{const b=document.createElement('button');b.textContent=name;b.classList.toggle('active',i===0);b.onclick=()=>setTour(name);$('#tourTabs').appendChild(b)});
function setTour(name){state.tour=name;$('#tourContent').innerHTML=tourData[name]();$$('#tourTabs button').forEach(b=>b.classList.toggle('active',b.textContent===name))}
$('#heroAiButton').onclick=()=>showToast('AI-assisted follow-up drafts prepared for review.');
function showToast(text){$('#toast').textContent=text;$('#toast').classList.add('show');setTimeout(()=>$('#toast').classList.remove('show'),2600)}

function renderWorkflow(){const trigger=$('#workflowTrigger').value,action=$('#workflowAction').value,owner=$('#workflowOwner').value;$('#workflowOutput').innerHTML=`<div class="flow-line"><div class="flow-node"><span>Trigger</span><b>${trigger}</b></div><div class="flow-arrow">→</div><div class="flow-node"><span>Action</span><b>${action}</b></div><div class="flow-arrow">→</div><div class="flow-node"><span>Owner</span><b>${owner}</b></div></div>`}
$('#workflowForm').onsubmit=e=>{e.preventDefault();renderWorkflow()};
$$('[data-usecase]').forEach(b=>b.onclick=()=>{setTour(b.dataset.usecase==='Sales'?'CRM':b.dataset.usecase==='Projects'?'Projects':b.dataset.usecase==='Operations'?'Automations':'Reports');$('#product').scrollIntoView({behavior:'smooth'})});

function renderIntegrations(filter=''){const f=filter.toLowerCase();const list=integrations.filter(x=>`${x.name} ${x.type}`.toLowerCase().includes(f));$('#integrationGrid').innerHTML=list.map(x=>`<article class="integration-card"><div class="integration-icon">${x.icon}</div><h3>${x.name}</h3><p>${x.type} integration category</p></article>`).join('')}
$('#integrationSearch').oninput=e=>renderIntegrations(e.target.value);

function renderPricing(){const yearly=state.billing==='yearly';$('#pricingGrid').innerHTML=plans.map(p=>`<article class="price-card ${p.featured?'featured':''} reveal visible"><span>${p.name}</span><h3>${p.desc}</h3><strong>${formatINR(yearly?p.yearly:p.monthly)}<small> / user / month</small></strong><ul>${p.features.map(x=>`<li>${x}</li>`).join('')}</ul><button class="button primary" data-plan="${p.name}">Discuss ${p.name}</button></article>`).join('');$$('[data-plan]').forEach(b=>b.onclick=()=>wa(`SaaS plan enquiry\nPlan: ${b.dataset.plan}\nPlease share verified limits, billing, taxes and onboarding details.`))}
$$('[data-billing]').forEach(b=>b.onclick=()=>{state.billing=b.dataset.billing;$$('[data-billing]').forEach(x=>x.classList.toggle('active',x===b));renderPricing()});

function calculateRoi(){const team=Math.max(1,+$('#roiTeam').value||1),hours=Math.max(0,+$('#roiHours').value||0),pct=+$('#roiPercent').value,rate=Math.max(0,+$('#roiRate').value||0);const monthly=Math.round(team*hours*pct*4);$('#roiTime').textContent=`${monthly} hours`;$('#roiValue').textContent=formatINR(monthly*rate)}
$$('#roiForm input,#roiForm select').forEach(x=>x.oninput=calculateRoi);

function wa(message){window.open(`https://wa.me/${WA}?text=${encodeURIComponent(message)}`,'_blank')}
$('#demoForm').onsubmit=e=>{e.preventDefault();const f=new FormData(e.currentTarget);wa(`SaaS demo request\nName: ${f.get('name')}\nCompany: ${f.get('company')}\nPhone: ${f.get('phone')}\nTeam size: ${f.get('team')}\nUse case: ${f.get('usecase')}\nPreferred time: ${f.get('time')}\nCurrent workflow: ${f.get('workflow')}`)};
$('#contactForm').onsubmit=e=>{e.preventDefault();const f=new FormData(e.currentTarget);wa(`SaaS website enquiry\nName: ${f.get('name')}\nCompany/Product: ${f.get('company')}\nPhone: ${f.get('phone')}\nWebsite type: ${f.get('type')}\nRequirement: ${f.get('message')}`)};

$('#previousStyle').onclick=()=>setStyle(state.style-1,true);$('#nextStyle').onclick=()=>setStyle(state.style+1,true);$('#customizerToggle').onclick=()=>$('#customizerPanel').classList.toggle('open');$('#autoToggle').onclick=e=>{state.auto=!state.auto;e.target.textContent=state.auto?'Pause Auto':'Play Auto';restartAuto()};$('#colorPicker').oninput=e=>setColor(e.target.value);$('#colorSearch').onchange=e=>{const v=e.target.value.trim().toLowerCase(),found=colors.find(c=>c.name.toLowerCase().includes(v));if(found)setColor(found.hex,colors.indexOf(found));else if(/^#[0-9a-f]{6}$/i.test(v))setColor(v)};$('#lockColor').onclick=e=>{state.colorLocked=!state.colorLocked;e.target.classList.toggle('locked',state.colorLocked);e.target.textContent=state.colorLocked?'Color Locked':'Lock Color';save()};$('#lockText').onclick=e=>{state.textLocked=!state.textLocked;e.target.classList.toggle('locked',state.textLocked);e.target.textContent=state.textLocked?'Text Locked':'Lock Text';save()};$('#fontSelect').onchange=e=>{document.documentElement.style.setProperty('--font',e.target.value);save()};$('#fontSearch').onchange=e=>{const v=e.target.value.trim();if(v){document.documentElement.style.setProperty('--font',`${v}, Arial, sans-serif`);save()}};$('#lockFont').onclick=e=>{state.fontLocked=!state.fontLocked;e.target.classList.toggle('locked',state.fontLocked);e.target.textContent=state.fontLocked?'Font Locked':'Lock Font'};$('#themeToggle').onclick=e=>{const dark=document.documentElement.dataset.theme!=='dark';document.documentElement.dataset.theme=dark?'dark':'light';e.target.textContent=dark?'Light Mode':'Dark Mode';save()};$('#menuButton').onclick=()=>{const n=$('#navLinks');n.classList.toggle('open');$('#menuButton').setAttribute('aria-expanded',n.classList.contains('open'))};$$('#navLinks a').forEach(a=>a.onclick=()=>$('#navLinks').classList.remove('open'));
const observer=new IntersectionObserver(es=>es.forEach(x=>{if(x.isIntersecting)x.target.classList.add('visible')}),{threshold:.1});$$('.reveal').forEach(x=>observer.observe(x));

restore();setTour('CRM');renderWorkflow();renderIntegrations();renderPricing();calculateRoi();setStyle(state.style);if(state.colorLocked)setColor(colors[state.color]?.hex||colors[0].hex,state.color);if(state.textLocked)setText(state.text);$('#lockColor').classList.toggle('locked',state.colorLocked);$('#lockColor').textContent=state.colorLocked?'Color Locked':'Lock Color';$('#lockText').classList.toggle('locked',state.textLocked);$('#lockText').textContent=state.textLocked?'Text Locked':'Lock Text';restartAuto();